客户端验证的*--jQuery.validator

时间：2023-03-08 22:39:27

最近在做一个用户注册登录的页面，资料查寻过程中发现了一个非常不错的客户端验证的*－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，但具体原因还没有查清楚。同时，这个插件提供了本地化的消息，但对于我这里初学者来说，怎么使用它还有待摸索！

相关文章