jquery validate.js 内置及自定义验证规则

时间:2021-05-27 20:36:12

内置的验证规则

required:true               必输字段
remote:"check.php"           使用ajax方法调用check.php验证输入值
email:true                   必须输入正确格式的电子邮件
url:true                     必须输入正确格式的网址
date:true                   必须输入正确格式的日期
dateISO:true                 必须输入正确格式的日期(ISO),例如:2010-01-01,2010/01/01 只验证格式,不验证有效性
number:true                 必须输入合法的数字(负数,小数)
digits:true                 必须输入整数
creditcard:                 必须输入合法的信用卡号
equalTo:"#field"           输入值必须和#field相同
accept: "gif|png|jpg" 输入拥有合法后缀名的字符串(上传文件的后缀),多个后缀之间用’|’隔开
maxlength:5                 输入长度最多是5的字符串(汉字算一个字符)
minlength:10               输入长度最小是10的字符串(汉字算一个字符)
rangelength:[5,10]         输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
range:[5,10]               输入值必须介于 5 和 10 之间
max:5                       输入值不能大于5
min:10                     输入值不能小于10

自定义验证规则

//判断两个值是否相等  

jQuery.validator.addMethod("notEqualTo", function (value, element, param) {  

   return value != $(param).val();  

}, $.validator.format("两次输入不能相同!"));  

  

//只能输入数字  

jQuery.validator.addMethod("isNum", function (value, element) {  

   var RegExp = /^\d+$/;  

   return RegExp.test(value);  

}, $.validator.format("只能为数字!"));  

  

//规则名:buga,value检测对像的值    

$.validator.addMethod("buga", function (value) {  

   return value == "buga";  

}, 'Please enter "buga"!');  

  

//规则名:chinese,value检测对像的值,element检测的对像    

$.validator.addMethod("chinese", function (value, element) {  

   var chinese = /^[\u4e00-\u9fa5]+$/;  

   return (chinese.test(value)) || this.optional(element);  

}, "只能输入中文");  

  

//规则名:byteRangeLength,value检测对像的值,element检测的对像,param参数    

jQuery.validator.addMethod("byteRangeLength", function (value, element, param) {  

   var length = value.length;  

   for (var i = 0; i < value.length; i++) {  

       if (value.charCodeAt(i) > 127) {  

           length++;  

       }  

   }  

   return this.optional(element) || (length >= param[0] && length <= param[1]);  

}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));  

  

// 联系电话(手机/电话皆可)验证  

jQuery.validator.addMethod("isPhone", function (value, element) {  

   var length = value.length;  

   var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;  

   var tel = /^\d{3,4}-?\d{7,9}$/;  

   return this.optional(element) || (tel.test(value) || mobile.test(value));  

 

 

}, "请正确填写您的联系电话");  

 

 

// 邮政编码验证  

jQuery.validator.addMethod("isZipCode", function (value, element) {  

   var tel = /^[0-9]{6}$/;  

   return this.optional(element) || (tel.test(value));  

}, "请正确填写您的邮政编码");  

 

// 字符验证  

jQuery.validator.addMethod("string", function (value, element) {  

   return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);  

}, "不允许包含特殊符号!");  

  

// 必须以特定字符串开头验证  

jQuery.validator.addMethod("begin", function (value, element, param) {  

   var begin = new RegExp("^" + param);  

   return this.optional(element) || (begin.test(value));  

}, $.validator.format("必须以 {0} 开头!"));  

  

// 验证两次输入值是否不相同  

jQuery.validator.addMethod("notEqualTo", function (value, element, param) {  

   return value != $(param).val();  

}, $.validator.format("两次输入不能相同!"));  

  

// 验证值不允许与特定值等于  

jQuery.validator.addMethod("notEqual", function (value, element, param) {  

   return value != param;  

}, $.validator.format("输入值不允许为{0}!"));  

  

// 验证值必须大于特定值(不能等于)  

jQuery.validator.addMethod("gt", function (value, element, param) {  

   return value > param;  

}, $.validator.format("输入值必须大于{0}!"));  

  

// 验证值小数位数不能超过两位  

jQuery.validator.addMethod("decimal", function (value, element) {  

   var decimal = /^-?\d+(\.\d{1,2})?$/;  

   return this.optional(element) || (decimal.test(value));  

}, $.validator.format("小数位数不能超过两位!"));  

  

//字母数字  

jQuery.validator.addMethod("alnum", function (value, element) {  

   return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);  

}, "只能包括英文字母和数字");  

  

// 汉字  

jQuery.validator.addMethod("chcharacter", function (value, element) {  

   var tel = /^[\u4e00-\u9fa5]+$/;  

   return this.optional(element) || (tel.test(value));  

}, "请输入汉字");  

  

// 身份证号码验证(加强验证)  

jQuery.validator.addMethod("isIdCardNo", function (value, element) {  

   return this.optional(element) || /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/.test(value) || /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[A-Z])$/.test(value);  

}, "请正确输入您的身份证号码");  

  

// 手机号码验证  

jQuery.validator.addMethod("isMobile", function (value, element) {  

   var length = value.length;  

   var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;  

   return this.optional(element) || (length == 11 && mobile.test(value));  

}, "请正确填写您的手机号码");  

  

// 电话号码验证  

jQuery.validator.addMethod("isTel", function (value, element) {  

   var tel = /^\d{3,4}-?\d{7,9}$/;    //电话号码格式010-12345678  

   return this.optional(element) || (tel.test(value));  

}, "请正确填写您的电话号码");  

  

//页面加载时调用  

$(function () {  

   $('#cerform').validate({  

       rules: {  

           txtUserName: {  

               required: true,  

               maxlength: 8,  

               minlength: 4  

           },  

           txtUserCardID: {  

               required: true,  

               maxlength: 18,  

               minlength: 18,  

               isIdCardNo: "#txtUserCardID"  

           },  

           txtUserPwd: {  

               required: true,  

               maxlength: 18,  

               minlength: 6,  

               notEqualTo: "#txtUserPwd"  

           },  

           txtRUserPwd: {  

               required: true,  

               equalTo: "#txtUserPwd"  

           },  

           txtAddress: {  

               required: true,  

               maxlength: 50  

           },  

           txtAreaContent: {  

               required: true,  

               maxlength: 300  

           },  

           txtUrl: {  

               required: true,  

               url: true  

           },  

           txtPhone: {  

               required: true,  

               minlength: 7,  

               maxlength: 13,  

               isTell: true,  

               isMobile: "#txtPhone"  

           },  

           txtZipCode: {  

               required: true,  

               minlength: 6,  

               maxlength: 6,  

               isNum: true  

           },  

           txtEmail: {  

               required: true,  

               email: true,  

               maxlength: 40  

           }  

       },  

       messages: {  

           txtUserName: {  

               required: "用户名不能为空!",  

               maxlength: "最长为18个字符!",  

               minlength: "最短为4个字符!",  

               remote: "该用户名已被占用!"  

           },  

           txtUserCardID: {  

               required: "身份证不能为空!",  

               maxlength: "身份证为18个字符!",  

               minlength: "身份证为18个字符!"  

           },  

           txtUserPwd: {  

               required: "密码不能为空!",  

               maxlength: "最长为18个字符!",  

               minlength: "最短为6个字符!",  

               notEqualTo: "用户名和密码不能相同!"  

           },  

           txtRUserPwd: {  

               required: "密码不能为空!",  

               equalTo: "两次输入密码不相同!"  

           },  

           txtAddress: {  

               required: "地址不能为空!",  

               maxlength: "最长50个字符!"  

           },  

           txtAreaContent: {  

               required: "不能为空!",  

               maxlength: "最长300个字符!"  

           },  

           txtUrl: {  

               required: "网址不能为空!",  

               url: "请填写正确的网址!"  

           },  

           txtPhone: {  

               required: "电话不能为空!",  

               minlength: "最少7个数字!",  

               maxlength: "最长13个数字!",  

               isTell: "电话格式不正确!"  

           },  

           txtZipCode: {  

               required: "邮编不能为空!",  

               minlength: "邮编为6个数字!",  

               maxlength: "邮编为6个数字!",  

               isNum: "请输入数字!"  

           },  

           txtEmail: {  

               required: "邮箱不能为空!",  

               email: "邮箱格式不正确!",  

               maxlength: "最长40个字符!"  

           }  

       },  

       errorPlacement: function (error, element) {  

           error.appendTo(element.parent());  

       },  

       submitHandler: function (form) {  

           form.submit();  

       },  

       errorClass: "error",  

       focusCleanup: true, //被验证的元素获得焦点时移除错误信息  

       success: function (label) {  

           label.html("<span style=\"color:green\">填写正确!</span>").addClass("success");  

       }  

   });  

 

   //所有使用“.ipt_txt”样式的文本框加上效果,获得焦点文本框变成淡黄色  

   $(".ipt_txt").focus(function () {  www.2cto.com

       $(this).css("background-color", "#FFFFCC").blur(function () {  

           $(this).css("background-color", "#FBFBFB");  

       });  

   });  

});