easyui 表单验证扩展

转载自:http://blog.csdn.net/jumtre/article/details/38680343

easyui 的validatebox()提供了自定义验证的方法，为此我把一些常用的数据验证汇总了一下，代码如下：

[javascript] view plain copy

1. $.extend($.fn.validatebox.defaults.rules, {  
2.     CHS: {  
3.         validator: function (value, param) {  
4.             return /^[\u0391-\uFFE5]+$/.test(value);  
5.         },  
6.         message: '请输入汉字'  
7.     },  
8.     ZIP: {  
9.         validator: function (value, param) {  
10.             return /^[1-9]\d{5}$/.test(value);  
11.         },  
12.         message: '邮政编码不存在'  
13.     },  
14.     QQ: {  
15.         validator: function (value, param) {  
16.             return /^[1-9]\d{4,10}$/.test(value);  
17.         },  
18.         message: 'QQ号码不正确'  
19.     },  
20.     mobile: {  
21.         validator: function (value, param) {  
22.             return /^((\d2,3)|(\d{3}\-))?13\d{9}$/.test(value);  
23.         },  
24.         message: '手机号码不正确'  
25.     },  
26.     loginName: {  
27.         validator: function (value, param) {  
28.             return /^[\u0391-\uFFE5\w]+$/.test(value);  
29.         },  
30.         message: '登录名称只允许汉字、英文字母、数字及下划线。'  
31.     },  
32.     safepass: {  
33.         validator: function (value, param) {  
34.             return safePassword(value);  
35.         },  
36.         message: '密码由字母和数字组成，至少6位'  
37.     },  
38.     equalTo: {  
39.         validator: function (value, param) {  
40.             return value == $(param[0]).val();  
41.         },  
42.         message: '两次输入的字符不一至'  
43.     },  
44.     number: {  
45.         validator: function (value, param) {  
46.             return /^\d+$/.test(value);  
47.         },  
48.         message: '请输入数字'  
49.     },  
50.     idcard: {  
51.         validator: function (value, param) {  
52.             return idCard(value);  
53.         },  
54.         message:'请输入正确的身份证号码'  
55.     }  
56. });  
57.   
58. /* 密码由字母和数字组成，至少6位 */  
59. var safePassword = function (value) {  
60.     return !(/^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.
    \{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/.test(value));  
61. }  
62.   
63. var idCard = function (value) {  
64.     if (value.length == 18 && 18 != value.length) return false;  
65.     var number = value.toLowerCase();  
66.     var d, sum = 0, v = '10x98765432', w = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2], a = '11,12,13,14,15,21,22,23,31,32,33,34,35,36,37,41,42,43,44,45,46,50,51,52,53,54,61,62,63,64,65,71,81,82,91';  
67.     var re = number.match(/^(\d{2})\d{4}(((\d{2})(\d{2})(\d{2})(\d{3}))|((\d{4})(\d{2})(\d{2})(\d{3}[x\d])))$/);  
68.     if (re == null || a.indexOf(re[1]) < 0) return false;  
69.     if (re[2].length == 9) {  
70.         number = number.substr(0, 6) + '19' + number.substr(6);  
71.         d = ['19' + re[4], re[5], re[6]].join('-');  
72.     } else d = [re[9], re[10], re[11]].join('-');  
73.     if (!isDateTime.call(d, 'yyyy-MM-dd')) return false;  
74.     for (var i = 0; i < 17; i++) sum += number.charAt(i) * w[i];  
75.     return (re[2].length == 9 || number.charAt(17) == v.charAt(sum % 11));  
76. }  
77.   
78. var isDateTime = function (format, reObj) {  
79.     format = format || 'yyyy-MM-dd';  
80.     var input = this, o = {}, d = new Date();  
81.     var f1 = format.split(/[^a-z]+/gi), f2 = input.split(/\D+/g), f3 = format.split(/[a-z]+/gi), f4 = input.split(/\d+/g);  
82.     var len = f1.length, len1 = f3.length;  
83.     if (len != f2.length || len1 != f4.length) return false;  
84.     for (var i = 0; i < len1; i++) if (f3[i] != f4[i]) return false;  
85.     for (var i = 0; i < len; i++) o[f1[i]] = f2[i];  
86.     o.yyyy = s(o.yyyy, o.yy, d.getFullYear(), 9999, 4);  
87.     o.MM = s(o.MM, o.M, d.getMonth() + 1, 12);  
88.     o.dd = s(o.dd, o.d, d.getDate(), 31);  
89.     o.hh = s(o.hh, o.h, d.getHours(), 24);  
90.     o.mm = s(o.mm, o.m, d.getMinutes());  
91.     o.ss = s(o.ss, o.s, d.getSeconds());  
92.     o.ms = s(o.ms, o.ms, d.getMilliseconds(), 999, 3);  
93.     if (o.yyyy + o.MM + o.dd + o.hh + o.mm + o.ss + o.ms < 0) return false;  
94.     if (o.yyyy < 100) o.yyyy += (o.yyyy > 30 ? 1900 : 2000);  
95.     d = new Date(o.yyyy, o.MM - 1, o.dd, o.hh, o.mm, o.ss, o.ms);  
96.     var reVal = d.getFullYear() == o.yyyy && d.getMonth() + 1 == o.MM && d.getDate() == o.dd && d.getHours() == o.hh && d.getMinutes() == o.mm && d.getSeconds() == o.ss && d.getMilliseconds() == o.ms;  
97.     return reVal && reObj ? d : reVal;  
98.     function s(s1, s2, s3, s4, s5) {  
99.         s4 = s4 || 60, s5 = s5 || 2;  
100.         var reVal = s3;  
101.         if (s1 != undefined && s1 != '' || !isNaN(s1)) reVal = s1 * 1;  
102.         if (s2 != undefined && s2 != '' && !isNaN(s2)) reVal = s2 * 1;  
103.         return (reVal == s1 && s1.length != s5 || reVal > s4) ? -10000 : reVal;  
104.     }  
105. };  

页面中要引入jQuery.js 和 easyui.min.js

html 代码中使用如下

[html] view plain copy

1. <table class="grid" id="uiform">  
2. <tr><td>登录名：</td><td><input  required="true" id="txtUsername" type="text" class="txt03" /></td><td>真实姓名：</td><td><input id="txtTruename" validType="CHS" required="true" type="text" class="txt03" /></td></tr>  
3. <tr><td>登录密码：</td><td><input validType="safepass"  required="true" id="txtPassword" name="password" type="password" class="txt03" /></td><td>Email：</td><td><input id="txtEmail" name="email"  validType="email" type="text" class="txt03" /></td></tr>  
4. <tr><td>身份证号：</td><td><input validType="idcard" id="txtIdcard" name="idcard" type="text" class="txt03" /></td><td>QQ：</td><td><input validType="QQ" id="txtQq" name="qq" type="text" class="txt03" /></td></tr>  
5. <tr><td>手机：</td><td><input validType="mobile" id="txtMobile" name="mobile" type="text" class="txt03" /></td><td>电话：</td><td><input id="txtTel" name="tel" type="text" class="txt03" /></td></tr>  
6. <tr><td>家庭住址：</td><td colspan="3"><input validType="equalTo[txtMobile]" style="width:80%" id="txtHomeaddr" name="homeaddr" type="text" class="txt03" /></td></tr>  
7. <tr><td>备注：</td><td colspan="3"> <input type="text" style="width:80%" class="txt03" id="txtRemark"></textarea></td></tr>  
8. <tr><td> </td><td colspan="3"><input id="Checkbox1" type="checkbox" /><label>超级管理员</label>  <input id="Checkbox2" type="checkbox" /><label>禁用</label></td></tr>   
9. </table>  

这一段JS 是必不可少的

[javascript] view plain copy

1. $(function(){  
2.   $('#uiform input').each(function () {  
3.             if ($(this).attr('required') || $(this).attr('validType'))  
4.                 $(this).validatebox();  
5.         })  
6.  });  

这样就ok了

如果在提交时验证表单有没有通过验证，则可使用下面的代码

[javascript] view plain copy

1. var flag = true;  
2.   
3. $('#uiform input').each(function () {  
4.     if ($(this).attr('required') || $(this).attr('validType')) {  
5.     if (!$(this).validatebox('isValid')) {  
6.         flag = false;  
7.         return;  
8.     }  
9.     }  
10. })  
11.   
12. if (flag)  
13.     alert('验证通过！');  
14. else  
15.     alert('验证失败！');