jQuery Validation范例

上班无事，学习jQuery Validation，于是手写一公共范例，并收藏以便后用

验证操作类formValidatorClass.js

 

  1 /**/ /**  
  2 * @author ming  
  3 */   
  4 $(document).ready( function () {       
  5         
  6/**//* 设置默认属性 */       
  7$.validator.setDefaults({       
  8    submitHandler: function(form) {    
  9        form.submit();    
 10    }       
 11});   
 12  
 13// 字符验证       
 14jQuery.validator.addMethod("stringCheck", function(value, element) {       
 15    return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);       
 16}, "只能包括中文字、英文字母、数字和下划线");   
 17  
 18// 中文字两个字节       
 19jQuery.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// 身份证号码验证       
 30jQuery.validator.addMethod("isIdCardNo", function(value, element) {       
 31    return this.optional(element) || isIdCardNo(value);       
 32}, "请正确输入您的身份证号码");    
 33     
 34// 手机号码验证       
 35jQuery.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// 电话号码验证       
 42jQuery.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// 联系电话(手机/电话皆可)验证   
 48jQuery.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// 邮政编码验证       
 57jQuery.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} );

 

测试页index.html

 

 1 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   
 2 "http://www.w3.org/TR/html4/loose.dtd" >   
 3 < html  xmlns ="http://www.w3.org/1999/xhtml" >   
 4      < head >   
 5          < meta  http-equiv ="Content-Type"  content ="text/html; charset=gbk"   />   
 6          < title > jQuery验证 </ title >   
 7          < script  src ="lib/jquery/jquery-1.3.2.min.js"   ></ script >   
 8          < script  type ="text/javascript"  src ="lib/jquery/jquery.validate.js"  mce_src ="lib/jquery/jquery.validate.js" ></ script >   
 9          < script  type ="text/javascript"  src ="lib/jquery/messages_cn.js" ></ script >   
10          < script  type ="text/javascript"  src ="lib/jquery/formValidatorClass.js" ></ script >   
11          < style  type ="text/css" >
12
13        * {}{    
14            font-family: Verdana;    
15            font-size: 96%;    
16        }   
17        label {}{    
18            width: 10em;    
19            float: left;    
20        }   
21        label.error {}{    
22            float: none;    
23            color: red;    
24            padding-left: .5em;    
25            vertical-align: top;    
26        }   
27        p {}{    
28            clear: both;    
29        }   
30        .submit {}{    
31            margin-left: 12em;    
32        }   
33        em {}{    
34            font-weight: bold;    
35            padding-right: 1em;    
36            vertical-align: top;    
37        }   
38           
39 </ style >
40      </ head >   
41      < body >   
42          < form  class ="submitForm"  id ="submitForm"  method ="get"  action ="" >   
43           < fieldset >   
44             < legend > 表单验证 </ legend >   
45             < p >   
46               < label  for ="username" > 用户名 </ label >   
47               < em > * </ em >< input  id ="userName"  name ="username"  size ="25"   />   
48             </ p >   
49             < p >   
50               < label  for ="email" > E-Mail </ label >   
51               < em > * </ em >< input  id ="email"  name ="email"  size ="25"   />   
52             </ p >   
53             < p >   
54               < label  for ="phone" > 联系电话 </ label >   
55               < em > * </ em >< input  id ="phone"  name ="phone"  size ="25"  value =""   />   
56             </ p >   
57             < p >   
58               < label  for ="address" > 地址 </ label >   
59               < em > * </ em >< input  id ="address"  name ="address"  size ="22" >   
60             </ p >   
61               < input  class ="submit"  type ="submit"  value ="提交" />   
62             </ p >   
63            </ fieldset >   
64           </ form >   
65      </ body >   
66 </ html >