jquery validate 2

来源：互联网发布：医生用药app软件编辑：程序博客网时间：2024/06/18 10:11

注意看红色部分

$(document).ready(function () {
  5
  6  /*  设置默认属性  */
  7  $.validator.setDefaults( {
  8      submitHandler:  function (form)  {
  9          form.submit();
10      }
11  } );
12
13  //  字符验证
14  jQuery.validator.addMethod( " stringCheck " ,  function (value, element)  {
15       return   this .optional(element)  ||   / ^[/u0391-/uFFE5/w]+$ / .test(value);
16  } ,  " 只能包括中文字、英文字母、数字和下划线 " );
17
18  //  中文字两个字节
19  jQuery.validator.addMethod( " byteRangeLength " ,  function (value, element, param)  {
20       var  length  =  value.length;
21       for ( var  i  =   0 ; i  <  value.length; i ++ ) {
22           if (value.charCodeAt(i)  >   127 ) {
23          length ++ ;
24          }
25      }
26       return   this .optional(element)  ||  ( length  >=  param[ 0 ]  &&  length  <=  param[ 1 ] );
27  } ,  " 请确保输入的值在3-15个字节之间(一个中文字算2个字节) " );
28
29  //  身份证号码验证
30  jQuery.validator.addMethod( " isIdCardNo " ,  function (value, element)  {
31       return   this .optional(element)  ||  isIdCardNo(value);
32  } ,  " 请正确输入您的身份证号码 " );
33
34  //  手机号码验证
35  jQuery.validator.addMethod( " isMobile " ,  function (value, element)  {
36       var  length  =  value.length;
37       var  mobile  =   / ^(((13[0-9]{1})|(15[0-9]{1}))+/d{8})$ / ;
38       return   this .optional(element)  ||  (length  ==   11   &&  mobile.test(value));
39  } ,  " 请正确填写您的手机号码 " );
40
41  //  电话号码验证
42  jQuery.validator.addMethod( " isTel " ,  function (value, element)  {
43       var  tel  =   / ^/d{3,4}-?/d{7,9}$ / ;     // 电话号码格式010-12345678
44       return   this .optional(element)  ||  (tel.test(value));
45  } ,  " 请正确填写您的电话号码 " );
46
47  //  联系电话(手机/电话皆可)验证
48  jQuery.validator.addMethod( " isPhone " ,  function (value,element)  {
49       var  length  =  value.length;
50       var  mobile  =   / ^(((13[0-9]{1})|(15[0-9]{1}))+/d{8})$ / ;
51       var  tel  =   / ^/d{3,4}-?/d{7,9}$ / ;
52       return   this .optional(element)  ||  (tel.test(value)  ||  mobile.test(value));
53
54  } ,  " 请正确填写您的联系电话 " );
55
56  //  邮政编码验证
57  jQuery.validator.addMethod( " isZipCode " ,  function (value, element)  {
58       var  tel  =   / ^[0-9]{6}$ / ;
59       return   this .optional(element)  ||  (tel.test(value));
60  } ,  " 请正确填写您的邮政编码 " );
61
62  // 开始验证
63  $( ' #submitForm ' ).validate( {
64       /*  设置验证规则  */
65      rules:  {
66          username:  {
67              required: true ,
68              stringCheck: true ,
69              byteRangeLength:[ 3 , 15 ]
70          } ,
71          email: {
72              required: true ,
73              email: true
74          } ,
75          phone: {
76              required: true ,
77              isPhone: true
78          } ,
79          address: {
80              required: true ,
81              stringCheck: true ,
82              byteRangeLength:[ 3 , 100 ]
83          }
84      } ,
85
86       /*  设置错误信息  */
87      messages:  {
88          username:  {
89              required:  " 请填写用户名 " ,
90              stringCheck:  " 用户名只能包括中文字、英文字母、数字和下划线 " ,
91              byteRangeLength:  " 用户名必须在3-15个字符之间(一个中文字算2个字符) "
92          } ,
93          email: {
94              required:  " 请输入一个Email地址 " ,
95              email:  " 请输入一个有效的Email地址 "
96          } ,
97          phone: {
98              required:  " 请输入您的联系电话 " ,
99              isPhone:  " 请输入一个有效的联系电话 "
100          } ,
101          address: {
102              required:  " 请输入您的联系地址 " ,
103              stringCheck:  " 请正确输入您的联系地址 " ,
104              byteRangeLength:  " 请详实您的联系地址以便于我们联系您 "
105          }
106      } ,
107
108      /*  设置验证触发事件  */
109      focusInvalid:  false ,
110      onkeyup:  false ,
111
112       /*  设置错误信息提示DOM  */
113      errorPlacement:  function (error, element)  {
114          error.appendTo( element.parent());
115      } ,
116
117  } );
118
119  } );

转载过来，留作日后使用

对jQuery的addMethod的使用方法也是很详细的例子

已使用过正则表达式

数字：正负，小数点都验证通过

/^-?(?:/d+|/d{1,3}(?:,/d{3})+)(?:/./d+)?$/