最近在做一个用户注册登录的页面,资料查寻过程中发现了一个非常不错的客户端验证的极品-jQuery.validate。
它是著名的JavaScript包jQuery的一个插件,其实它还有其它的一些插件应该都爽,有待慢慢来学习

官方地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation/
jQuery用户手册:http://jquery.org.cn/visual/cn/index.xml

开发使用起来非常简单明了,
我的代码:</p>

1. $(document).ready(function(){
2.
3. /* 设置默认属性&nbsp;*/
4. $.validator.setDefaults({
5. submitHandler: function(form) { form.submit(); }
6. });
7. // 中文字两个字节&nbsp;
8. jQuery.validator.addMethod(byteRangeLength, function(value, element, param) {
9. var length = value.length;
10. for(var i = 0; i < value.length; i++){
11. if(value.charCodeAt(i) > 127){
12. length++;
13. }
14. }
15. return this.optional(element) || ( length >= param[0] && length <= param[1] );
16. }, 请确保输入的值在3-15个字节之间(一个中文字算2个字节));
17.
18. /* 追加自定义验证方法&nbsp;*/
19. // 身份证号码验证&nbsp;
20. jQuery.validator.addMethod(isIdCardNo, function(value, element) {
21. return this.optional(element) || isIdCardNo(value);
22. }, 请正确输入您的身份证号码);
23.
24. // 字符验证
25. jQuery.validator.addMethod(userName, function(value, element) {
26. return this.optional(element) || /^[u0391uFFE5w]+$/.test(value);
27. }, 用户名只能包括中文字、英文字母、数字和下划线</span>);
28.
29. // 手机号码验证
30. jQuery.validator.addMethod(isMobile, function(value, element) {
31. var length = value.length;
32. return this.optional(element) || (length == 11 && /^(((13[09]{1})|(15[09]{1}))+d{8})$/.test(value));
33. }, 请正确填写您的手机号码</span>);
34.
35. // 电话号码验证
36. jQuery.validator.addMethod(isPhone, function(value, element) {
37. var tel = /^(d{3,4}-?)?d{7,9}$/g;
38. return this.optional(element) || (tel.test(value));
39. }, 请正确填写您的电话号码</span>);
40.
41. // 邮政编码验证
42. jQuery.validator.addMethod(isZipCode, function(value, element) {
43. var tel = /^[09]{6}$/;
44. return this.optional(element) || (tel.test(value));
45. }, 请正确填写您的邮政编码</span>);
46. $(regFrom).validate({
47. /* 设置验证规则 */
48. rules: {
49. userName: {
50. required: true,
51. userName: true,
52. byteRangeLength: [3,15]
53. },
54. password: {
55. required: true,
56. minLength: 5
57. },
58. repassword: {
59. required: true,
60. minLength: 5,
61. equalTo: #password
62. },
63. question: {
64. required: true
65. },
66. answer: {
67. required: true
68. },
69. realName: {
70. required: true
71. },
72. cardNumber: {
73. isIdCardNo: true
74. },
75. mobilePhone: {
76. isMobile: true
77. },
78. phone: {
79. isPhone: true
80. },
81. email: {
82. required: true,
83. email: true
84. },
85. zipCode: {
86. isZipCode:true
87. }
88. },
89. /* 设置错误信息 */
90. messages: {
91. userName: {
92. required: 请填写用户名,
93. byteRangeLength: 用户名必须在3-15个字符之间(一个中文字算2个字符)
94. },
95. password: {
96. required: 请填写密码</span>,
97. minlength: jQuery.format(输入{0}.)
98. },
99. repassword: {
100. required: 请填写确认密码</span>,
101. equalTo: 两次密码输入不相同</span>
102. },
103. question: {
104. required: 请填写您的密码提示问题</span>
105. },
106. answer: {
107. required: 请填写您的密码提示答案</span>
108. },
109. realName: {
110. required: 请填写您的真实姓名</span>
111. },
112. email: {
113. required: 请输入一个Email地址,
114. email: 请输入一个有效的Email地址
115. }
116. },
117. /* 错误信息的显示位置&nbsp;*/
118. errorPlacement: function(error, element) {
119. error.appendTo( element.parent() );
120. },
121. /* 验证通过时的处理 */
122. success: function(label) {
123. // set as text for IE
124. label.html( ).addClass(checked);
125. },
126. /* 获得焦点时不验证 */
127. focusInvalid: false,
128. onkeyup: false
129. });
130.
131. // 输入框获得焦点时,样式设置&nbsp;
132. $(‘input’).focus(function(){
133. if($(this).is(:text) || $(this).is(:password))
134. $(this).addClass(‘focus’);
135. if ($(this).hasClass(‘have_tooltip’)) {
136. $(this).parent().parent().removeClass(‘field_normal’).addClass(‘field_focus’);
137. }
138. });
139.
140. // 输入框失去焦点时,样式设置&nbsp;
141. $(‘input’).blur(function() {
142. $(this).removeClass(‘focus’);
143. if ($(this).hasClass(‘have_tooltip’)) {
144. $(this).parent().parent().removeClass(‘field_focus’).addClass(‘field_normal’);
145. }
146. });
147. });

网上的资料有人说,它跟prototype包会有冲突,我还没有同时使用过,这点不是很清楚,但我是发现一个问题:
对于最小/大
长度的验证方法,作者可能考虑到大家的命名习惯不同,同时做了minLength和minlength(maxLength和maxlength)方法,
应该哪一个都是可以的,但对于用户Message来说,只能够定义针对minlength(maxlength),才能调用用户自定义的Message,

否则只是调用包的默认Message,但具体原因还没有查清楚。同时,这个插件提供了本地化的消息,但对于我这里初学者来说,怎么使用它还有待摸索!

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注