JQuery validate验证规则

朱雀 2022-06-17 11:38 236阅读 0赞

//定义中文消息  
var cnmsg = \{   
required: “必选字段”,  
remote: “请修正该字段”,  
email: “请输入正确格式的电子邮件”,  
url: “请输入合法的网址”,  
date: “请输入合法的日期”,  
dateISO: “请输入合法的日期 (ISO).”,  
number: “请输入合法的数字”,  
digits: “只能输入整数”,  
creditcard: “请输入合法的信用卡号”,  
equalTo: “请再次输入相同的值”,  
accept: “请输入拥有合法后缀名的字符串”,  
maxlength:  [jQuery][] .format(“请输入一个长度最多是 \{0\} 的字符串”),  
minlength: jQuery.format(“请输入一个长度最少是 \{0\} 的字符串”),  
rangelength: jQuery.format(“请输入一个长度介于 \{0\} 和 \{1\} 之间的字符串”),  
range: jQuery.format(“请输入一个介于 \{0\} 和 \{1\} 之间的值”),  
max: jQuery.format(“请输入一个最大为 \{0\} 的值”),  
min: jQuery.format(“请输入一个最小为 \{0\} 的值”)  
\};

jQuery.extend(jQuery.validator.messages, cnmsg);

## Jquery Validate 验证规则 ##

(1)required:true              必输字段  
(2)remote:”check.[PHP][]”         使用ajax方法调用check.php验证输入值  
(3)email:true                 必须输入正确格式的电子邮件  
(4)url:true                   必须输入正确格式的网址  
(5)date:true                  必须输入正确格式的日期  
(6)dateISO:true               必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性  
(7)number:true                必须输入合法的数字(负数，小数)  
(8)digits:true                必须输入整数  
(9)creditcard:                必须输入合法的信用卡号  
(10)equalTo:”\#field”          输入值必须和\#field相同  
(11)accept:                   输入拥有合法后缀名的字符串（上传文件的后缀）  
(12)maxlength:5               输入长度最多是5的字符串(汉字算一个字符)  
(13)minlength:10              输入长度最小是10的字符串(汉字算一个字符)  
(14)rangelength:\[5,10\]        输入长度必须介于 5 和 10 之间的字符串”)(汉字算一个字符)  
(15)range:\[5,10\]              输入值必须介于 5 和 10 之间  
(16)max:5                     输入值不能大于5  
(17)min:10                    输入值不能小于10

## Jquery Validate 自定义验证规则 ##

addMethod(name,method,message)方法：  
参数name 是添加的方法的名字  
参数method是一个函数,接收三个参数(value,element,param) value 是元素的值,element是元素本身param  
是参数,我们可以用addMethod 来添加除built-in Validation methods 之外的验证方法比如有一个字段,只  
能输一个字母,范围是a-f,写法如下:

$.validator.addMethod(“af”,function(value,element,params)\{  
if(value.length>1)\{  
return false;  
\}  
if(value>=params\[0\]&&value<=params\[1\])\{  
return true;  
\}else\{  
return false;  
\}  
\},”必须是一个字母,且a-f”);  
用的时候,比如有个表单字段的id=”username”,则在rules 中写  
username:\{  
af:\["a","f"\]  
\}  
方法  
addMethod 的第一个参数,就是添加的验证方法的名子,这时是af  
addMethod 的第三个参数,就是自定义的错误提示,这里的提示为:”必须是一个字母,且a-f”  
addMethod 的第二个参数,是一个函数,这个比较重要,决定了用这个验证方法时的写法  
如果只有一个参数,直接写,如果af:”a”,那么a 就是这个唯一的参数,如果多个参数,用在\[\]里,用逗号分开

### Jquery Validate submit 提交 ###

submitHandler:
    通过验证后运行的函数,里面要加上表单提交的函
    数,否则表单不会提交

$(".selector").validate({
       submitHandler:function(form) {
    	$(form).ajaxSubmit();          //用Jquery Form的函数
       }
    })

### Jquery Validate error 错误提示dom ###

.errorPlacement：Callback Default: 把错误信息放在验证的元素后面  
指明错误放置的位置，默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面  
errorPlacement: function(error, element) \{  
error.appendTo(element.parent());  
\}

设置错误提示的样式，可以增加图标显示，like：

input.error \{ border: 1px solid red; \}  
label.error \{  
background:url(“./demo/images/unchecked.gif”) no-repeat 0px0px;

padding-left: 16px;

padding-bottom: 2px;

font-weight: bold;

color: \#EA5200;  
\}

### 附录：常用的自定义验证规则 ###

**// 字符验证**  
jQuery.validator.addMethod(“stringCheck”, function(value, element) \{  
return this.optional(element) || /^\[u0391-uFFE5w\]+$/.test(value);  
\}, ”只能包括中文字、英文字母、数字和下划线”);

**// 中文字两个字节**  
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\] );  
\}, ”请确保输入的值在3-15个字节之间(一个中文字算2个字节)”);

**// 身份证号码验证**  
jQuery.validator.addMethod(“isIdCardNo”, function(value, element) \{  
return this.optional(element) || isIdCardNo(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));  
\}, ”请正确填写您的电话号码”);

**// 联系电话(手机/电话皆可)验证**  
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));  
\}, ”请正确填写您的邮政编码”);

function isIdCardNo(num) \{

if (intStrLen == 18) \{  
//check date  
var date8 = idNumber.substring(6,14);  
if (isDate8(date8) == false) \{  
return false;  
\}  
// calculate the sum of the products  
for(i=0;i<17;i++) \{  
lngProduct = lngProduct + varArray\[i\];  
\}  
// calculate the check digit  
intCheckDigit = parityBit\[lngProduct % 11\];  
// check last digit  
if (varArray\[17\] != intCheckDigit) \{  
return false;  
\}  
\}  
else\{       //length is 15  
//check date  
var date6 = idNumber.substring(6,12);  
if (isDate6(date6) == false) \{

return false;  
\}  
\}  
return true;

\}  
  
function isDate6(sDate) \{  
if(!/^\[0-9\]\{6\}$/.test(sDate)) \{  
return false;  
\}  
var year, month, day;  
year = sDate.substring(0, 4);  
month = sDate.substring(4, 6);  
if (year < 1700 || year > 2500)return false  
if (month < 1 || month > 12) returnfalse  
return true  
\}  
  
function isDate8(sDate) \{  
if(!/^\[0-9\]\{8\}$/.test(sDate)) \{  
return false;  
\}  
var year, month, day;  
year = sDate.substring(0, 4);  
month = sDate.substring(4, 6);  
day = sDate.substring(6, 8);  
var iaMonthDays = \[31,28,31,30,31,30,31,31,30,31,30,31\]  
if (year < 1700 || year > 2500)return false  
if (((year % 4 == 0) && (year % 100!= 0)) || (year % 400 == 0)) iaMonthDays\[1\]=29;  
if (month < 1 || month > 12) returnfalse  
if (day < 1 || day >iaMonthDays\[month - 1\]) return false  
return true  
\}  
**//身份证号码验证   **  
jQuery.validator.addMethod(“idcardno”, function(value, element)\{  
return this.optional(element) || isIdCardNo(value);  
\}, “请正确输入身份证号码”);

**//字母数字**  
jQuery.validator.addMethod(“alnum”, function(value, element)\{  
return this.optional(element) ||/^\[a-zA-Z0-9\]+$/.test(value);  
\}, “只能包括英文字母和数字”);

** // 邮政编码验证**  
jQuery.validator.addMethod(“zipcode”, function(value, element)\{  
var tel = /^\[0-9\]\{6\}$/;  
return this.optional(element) || (tel.test(value));  
\}, “请正确填写邮政编码”);

**  // 汉字**  
jQuery.validator.addMethod(“chcharacter”, function(value, element)\{  
var tel = /^\[u4e00-u9fa5\]+$/;  
return this.optional(element) || (tel.test(value));  
\}, “请输入汉字”);

**// 字符最小长度验证（一个中文字符长度为2）**  
jQuery.validator.addMethod(“stringMinLength”, 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);  
\}, $.validator.format(“长度不能小于\{0\}!”));

**// 字符最大长度验证（一个中文字符长度为2）**  
jQuery.validator.addMethod(“stringMaxLength”, 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);  
\}, $.validator.format(“长度不能大于\{0\}!”));

**// 字符验证**  
jQuery.validator.addMethod(“string”, function(value, element)\{  
return this.optional(element) ||/^\[u0391-uFFE5w\]+$/.test(value);  
\}, “不允许包含特殊符号!”);

**// 手机号码验证**  
jQuery.validator.addMethod(“mobile”, function(value, element)\{  
var length = value.length;  
return this.optional(element) || (length == 11&&/^(((13\[0-9\]\{1\})|(15\[0-9\]\{1\}))+d\{8\})$/.test(value));  
\}, “手机号码格式错误!”);

**// 电话号码验证**  
jQuery.validator.addMethod(“phone”, function(value, element)\{  
var tel = /^(d\{3,4\}-?)?d\{7,9\}$/g;  
return this.optional(element) || (tel.test(value));  
\}, “电话号码格式错误!”);

**// 邮政编码验证**  
jQuery.validator.addMethod(“zipCode”, function(value, element)\{  
var tel = /^\[0-9\]\{6\}$/;  
return this.optional(element) || (tel.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]: http://lib.csdn.net/base/jquery
[PHP]: http://lib.csdn.net/base/php