在项目中碰到的一写正则验证,整理下来封装成一个JS插件
在HTML中的调用规则是
<script src="sys_validator.js"></script> // 引用JS
<form id="vali"> <div> <input type="text" data-rv-email="true" placeholder="验证"/><br/> </div> <div> <input type="text" data-rv-telephone="true" placeholder="验证"/><br/> </div> </form>
<script>
$('#vali').rxValidator({tigger:'blur'}) // 调用方法
</script>
/** * 匿名函数调用 * function(root, fn, plug){} * 创建一个闭包对象 */ (function(root, fn, plug){ return fn(root.jQuery, plug); })(window, function($, plug){ // 默认参数 var __DEFS__ = { trigger: "blur" }; var __RULES__ = { required: function(){ return this.val().trim() !== ""; },// 非空 regex: function(){ return new RegExp(this.data("rv-regex")).test(this.val()); },// 自定义正则 email: function(){ return /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(this.val()); },// email mobile: function(){ return /^1[3|4|5|7|8][0-9]{9}$/.test(this.val()); },// 手机 telephone: function(){ return /^(\d{3}-)?\d{8}(-\d{3,4})?$|^(\d{4}-)?\d{7}(-\d{3,4})?$/.test(this.val()); },// 固定电话 integer: function(){ return /^[0-9]*[1-9][0-9]*$/.test(this.val()); },// 数字 postcode: function(){ return /^[0-9][0-9]{5}$/.test(this.val()); },// 邮政 twodecimal:function(){ return /^[-+]?\d*[.]?\d{0,2}$/.test(this.val()); },//保留2位小数 uri: function(){ return /((http|https|ftp):\/\/([\w\-]+\.)+[\w\-]+(\/[\w\u4e00-\u9fa5\-\.\/?\@\%\!\&=\+\~\:\#\;\,]*)?)/ig.test(this.val()); },// uri isnum:function(){ return /^[0-9.{1}]+$/.test(this.val()); }, greatertan: function(){ return Number(this.val())>Number(this.data("rv-greatertan")); },// 最大值 lessthan: function(){ return Number(this.val())<=Number(this.data("rv-lessthan")); }// 最小值 }; var __RLUEMSG__ = { required:'不能为空!', email:'请输入正确邮箱格式', mobile:'请输入正确手机号码', telephone:'请输入正确固定电话', integer:'请输入整数', postcode:'请输入正确邮编', twodecimal:'需要有两位小数', greatertan:'输入的数字小了!', lessthan:'输入的数字大了!', isnum:'请输入数字' }; // 创建rxValidator的插件 $.fn[plug] = function(opts){ var _this = this; // console.log(this) // r.fn.init {trigger: "blur"} $.extend(this, __DEFS__, opts); // 将_DEFS_, opts 都赋值给this var $fileds = this.find("input").not("[type=button],[type=reset],[type=submit],[type=checkbox],[type=radio]"); // 给其添加事件 $fileds.on(this.trigger, function(){ var $filed = $(this); // 被验证的目标对象 var result = true; // 验证结果默认通过 $filed.next().remove(); // 验证之前,把之前的验证信息移除掉 $.each(__RULES__, function(rule, valider){ if($filed.data("rv-"+rule)){ // 我需要验证的rule规则 result = valider.call($filed); // 将验证的东西丢进去 if(!result){ var str = $filed.data("rv-"+rule+"-msg") != undefined ? $filed.data("rv-"+rule+"-msg") : __RLUEMSG__[rule]; $filed.after("<p style='position: relative;width: 100%; height:0px; margin:0;text-align: right;color: #c33;z-index: 99;top: -27px;right: 8px;'>"+str+"</p>"); _this.find('p').click(function(){ $(this).remove(); $filed.focus(); }) } return result; } }); }); } }, 'rxValidator')