最近在做一個用戶注冊登錄的頁面，資料查尋過程中發(fā)現(xiàn)了一個非常不錯的客戶端驗證的極品－jQuery.validate。
它是著名的JavaScript包jQuery的一個插件，其實它還有其它的一些插件應(yīng)該都爽，有待慢慢來學(xué)習(xí)
官方地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation/
jQuery用戶手冊：http://jquery.org.cn/visual/cn/index.xml
開發(fā)使用起來非常簡單明了，
我的代碼：
1. $(document).ready(function(){
2.
3. /* 設(shè)置默認屬性 */
4. $.validator.setDefaults({
5. submitHandler: function(form) { form.submit(); }
6. });
7. // 中文字兩個字節(jié)
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個字節(jié)之間(一個中文字算2個字節(jié))");
17.
18. /* 追加自定義驗證方法 */
19. // 身份證號碼驗證
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) || /^[\u0391-\uFFE5\w]+$/.test(value);
27. }, "用戶名只能包括中文字、英文字母、數(shù)字和下劃線");
28.
29. // 手機號碼驗證
30. jQuery.validator.addMethod("isMobile", function(value, element) {
31. var length = value.length;
32. return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/.test(value));
33. }, "請正確填寫您的手機號碼");
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. }, "請正確填寫您的電話號碼");
40.
41. // 郵政編碼驗證
42. jQuery.validator.addMethod("isZipCode", function(value, element) {
43. var tel = /^[0-9]{6}$/;
44. return this.optional(element) || (tel.test(value));
45. }, "請正確填寫您的郵政編碼");
46. $(regFrom).validate({
47. /* 設(shè)置驗證規(guī)則 */
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. /* 設(shè)置錯誤信息 */
90. messages: {
91. userName: {
92. required: "請?zhí)顚懹脩裘?/span>",
93. byteRangeLength: "用戶名必須在3-15個字符之間(一個中文字算2個字符)"
94. },
95. password: {
96. required: "請?zhí)顚懨艽a",
97. minlength: jQuery.format("輸入{0}.")
98. },
99. repassword: {
100. required: "請?zhí)顚懘_認密碼",
101. equalTo: "兩次密碼輸入不相同"
102. },
103. question: {
104. required: "請?zhí)顚懩拿艽a提示問題"
105. },
106. answer: {
107. required: "請?zhí)顚懩拿艽a提示答案"
108. },
109. realName: {
110. required: "請?zhí)顚懩恼鎸嵭彰?/span>"
111. },
112. email: {
113. required: "請輸入一個Email地址",
114. email: "請輸入一個有效的Email地址"
115. }
116. },
117. /* 錯誤信息的顯示位置 */
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. // 輸入框獲得焦點時，樣式設(shè)置
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. // 輸入框失去焦點時，樣式設(shè)置
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. });
網(wǎng)上的資料有人說，它跟prototype包會有沖突，我還沒有同時使用過，這點不是很清楚，但我是發(fā)現(xiàn)一個問題：
對于最小/大
長度的驗證方法，作者可能考慮到大家的命名習(xí)慣不同，同時做了minLength和minlength（maxLength和maxlength）方法，
應(yīng)該哪一個都是可以的，但對于用戶Message來說，只能夠定義針對minlength（maxlength），才能調(diào)用用戶自定義的Message，
否則只是調(diào)用包的默認Message，但具體原因還沒有查清楚。同時，這個插件提供了本地化的消息，但對于我這里初學(xué)者來說，怎么使用它還有待摸索！