[原创]jQuery Validation范例

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

验证操作类formValidatorClass.js

 

  1 ExpandedBlockStart.gif ContractedBlock.gif /**/ /**  
  2 * @author ming  
  3 */
  
  4 ExpandedBlockStart.gifContractedBlock.gif$(document).ready( function () {       
  5         
  6ExpandedSubBlockStart.gifContractedSubBlock.gif/**//* 设置默认属性 */       
  7ExpandedSubBlockStart.gifContractedSubBlock.gif$.validator.setDefaults({       
  8ExpandedSubBlockStart.gifContractedSubBlock.gif    submitHandler: function(form) {    
  9        form.submit();    
 10    }
       
 11}
);   
 12  
 13// 字符验证       
 14ExpandedSubBlockStart.gifContractedSubBlock.gifjQuery.validator.addMethod("stringCheck"function(value, element) {       
 15    return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);       
 16}
"只能包括中文字、英文字母、数字和下划线");   
 17  
 18// 中文字两个字节       
 19ExpandedSubBlockStart.gifContractedSubBlock.gifjQuery.validator.addMethod("byteRangeLength"function(value, element, param) {       
 20    var length = value.length;       
 21ExpandedSubBlockStart.gifContractedSubBlock.gif    for(var i = 0; i < value.length; i++){       
 22ExpandedSubBlockStart.gifContractedSubBlock.gif        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// 身份证号码验证       
 30ExpandedSubBlockStart.gifContractedSubBlock.gifjQuery.validator.addMethod("isIdCardNo"function(value, element) {       
 31    return this.optional(element) || isIdCardNo(value);       
 32}
"请正确输入您的身份证号码");    
 33     
 34// 手机号码验证       
 35ExpandedSubBlockStart.gifContractedSubBlock.gifjQuery.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// 电话号码验证       
 42ExpandedSubBlockStart.gifContractedSubBlock.gifjQuery.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// 联系电话(手机/电话皆可)验证   
 48ExpandedSubBlockStart.gifContractedSubBlock.gifjQuery.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// 邮政编码验证       
 57ExpandedSubBlockStart.gifContractedSubBlock.gifjQuery.validator.addMethod("isZipCode"function(value, element) {       
 58    var tel = /^[0-9]{6}$/;       
 59    return this.optional(element) || (tel.test(value));       
 60}
"请正确填写您的邮政编码");    
 61  
 62//开始验证   
 63ExpandedSubBlockStart.gifContractedSubBlock.gif$('#submitForm').validate({   
 64ExpandedSubBlockStart.gifContractedSubBlock.gif    /**//* 设置验证规则 */  
 65ExpandedSubBlockStart.gifContractedSubBlock.gif    rules: {   
 66ExpandedSubBlockStart.gifContractedSubBlock.gif        username: {   
 67            required:true,   
 68            stringCheck:true,   
 69            byteRangeLength:[3,15]   
 70        }
,   
 71ExpandedSubBlockStart.gifContractedSubBlock.gif        email:{   
 72            required:true,   
 73            email:true  
 74        }
,   
 75ExpandedSubBlockStart.gifContractedSubBlock.gif        phone:{   
 76            required:true,   
 77            isPhone:true  
 78        }
,   
 79ExpandedSubBlockStart.gifContractedSubBlock.gif        address:{   
 80            required:true,   
 81            stringCheck:true,   
 82            byteRangeLength:[3,100]   
 83        }
   
 84    }
,   
 85       
 86ExpandedSubBlockStart.gifContractedSubBlock.gif    /**//* 设置错误信息 */  
 87ExpandedSubBlockStart.gifContractedSubBlock.gif    messages: {   
 88ExpandedSubBlockStart.gifContractedSubBlock.gif        username: {       
 89            required: "请填写用户名",   
 90            stringCheck: "用户名只能包括中文字、英文字母、数字和下划线",   
 91            byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)"       
 92        }
,   
 93ExpandedSubBlockStart.gifContractedSubBlock.gif        email:{   
 94            required: "请输入一个Email地址",   
 95            email: "请输入一个有效的Email地址"  
 96        }
,   
 97ExpandedSubBlockStart.gifContractedSubBlock.gif        phone:{   
 98            required: "请输入您的联系电话",   
 99            isPhone: "请输入一个有效的联系电话"  
100        }
,   
101ExpandedSubBlockStart.gifContractedSubBlock.gif        address:{   
102            required: "请输入您的联系地址",   
103            stringCheck: "请正确输入您的联系地址",   
104            byteRangeLength: "请详实您的联系地址以便于我们联系您"  
105        }
   
106    }
,   
107       
108ExpandedSubBlockStart.gifContractedSubBlock.gif    /**//* 设置验证触发事件 */  
109    focusInvalid: false,   
110    onkeyup: false,   
111       
112ExpandedSubBlockStart.gifContractedSubBlock.gif    /**//* 设置错误信息提示DOM */  
113ExpandedSubBlockStart.gifContractedSubBlock.gif    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 ExpandedBlockStart.gifContractedBlock.gif         < style  type ="text/css" >
12
13ExpandedSubBlockStart.gifContractedSubBlock.gif        * {}{    
14            font-family: Verdana;    
15            font-size: 96%;    
16        }
   
17ExpandedSubBlockStart.gifContractedSubBlock.gif        label {}{    
18            width: 10em;    
19            float: left;    
20        }
   
21ExpandedSubBlockStart.gifContractedSubBlock.gif        label.error {}{    
22            float: none;    
23            color: red;    
24            padding-left: .5em;    
25            vertical-align: top;    
26        }
   
27ExpandedSubBlockStart.gifContractedSubBlock.gif        p {}{    
28            clear: both;    
29        }
   
30ExpandedSubBlockStart.gifContractedSubBlock.gif        .submit {}{    
31            margin-left: 12em;    
32        }
   
33ExpandedSubBlockStart.gifContractedSubBlock.gif        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 >

转载于:https://www.cnblogs.com/easyinsc/archive/2009/02/27/1407826.html

你可能感兴趣的:([原创]jQuery Validation范例)