jQuery Validation范例

maoye

2013-08-29

上班无事，学习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></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>
 
http://www.cnblogs.com/easyinsc/archive/2009/02/27/1407826.html