客户端验证的极品--jQuery.validator

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

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

开发使用起来非常简单明了， 
我的代码：

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

网上的资料有人说，它跟prototype包会有冲突，我还没有同时使用过，这点不是很清楚，但我是发现一个问题： 
对于最小/大长度的验证方法，作者可能考虑到大家的命名习惯不同，同时做了minLength和minlength（maxLength和maxlength）方法，应该哪一个都是可以的，但对于用户Message来说，只能够定义针对minlength（maxlength），才能调用用户自定义的Message， 
否则只是调用包的默认Message，但具体原因还没有查清楚。同时，这个插件提供了本地化的消息，但对于我这里初学者来说，怎么使用它还有待摸索！