Jquery validate 插件

比眉伴天荒 2022-05-21 07:38 248阅读 0赞

# 1. 默认validate参数的初始化： #

这个插件如果要用，肯定很多页面都会用到，毕竟如果有表单，就需要验证。而且这个插件的默认语言是英语，所以我们要转换成汉语。我们当然不希望在每个页面的js都写一遍message。所以我们可以在公用的js里面对默认message进行初始化。

1.  jQuery.extend(jQuery.validator.messages, \{ 
2.  required: "必选字段",
3.  remote: "请修正该字段",
4.  email: "请输入正确格式的电子邮件",
5.  url: "请输入合法的网址",
6.  date: "请输入合法的日期",
7.  dateISO: "请输入合法的日期 (ISO).",
8.  number: "请输入合法的数字",
9.  digits: "只能输入整数",
10. creditcard: "请输入合法的信用卡号",
11. equalTo: "请再次输入相同的值",
12. accept: "请输入拥有合法后缀名的字符串",
13. maxlength: jQuery.validator.format("请输入一个长度最多是 \{0\} 的字符串"),
14. minlength: jQuery.validator.format("请输入一个长度最少是 \{0\} 的字符串"),
15. rangelength: jQuery.validator.format("请输入一个长度介于 \{0\} 和 \{1\} 之间的字符串"),
16. range: jQuery.validator.format("请输入一个介于 \{0\} 和 \{1\} 之间的值"),
17. max: jQuery.validator.format("请输入一个最大为 \{0\} 的值"),
18. min: jQuery.validator.format("请输入一个最小为 \{0\} 的值")
19. \});

同时，我们也可以对一些其它参数进行初始化：

1.  $.validator.setDefaults(\{ 
2.  errorClass: "fieldError", // 错误的时候添加什么class
3.  ignore: ".ignore", // 默认忽略那些域的验证
4.  ignoreTitle: true,
5.  onkeyup: false,
6.  errorPlacement: function(error, element) \{ 
7.  // 有错误了怎么办
8.  \},
9.  submitHandler: function(form) \{ 
10. // 所有验证通过怎么办
11. \}
12. \});

####  2. 添加验证的规则 ####

验证的规则添加有很多种冷子欲之前的文章介绍的形式：

1.  $("\#form").validate(\{ 
2.  debug:true, //调试模式
3.  rules:\{ 
4.  username:\{ 
5.  required:true, //开启必填项
6.  rangelength:\[3,10\] //请输入的数值在3至10位之间
7.  \};
8.  \};
9.  \});

上面的验证规则都是写死的，比如required和rangelength都是插件内定好的规则，当然这些规则也不一定都能满足我们的要求，那么我们该怎么办？jquery.validation提供了一个添加自定义规则的方法：addMethod：

1.  $.validator.addMethod("usernameCheck", function(value, element)\{ 
2.  return /^\[0-9a-z\_A-Z\]+$/.test(value);
3.  \}, "用户名格式错误");
4.   
5.  $("form").validate(\{ 
6.  rules: \{ 
7.  username: \{ 
8.  required: true,
9.  minlength: 2,
10. maxlength: 20,
11. usernameCheck: true
12. remote: \{ 
13. url: "check\_username.jhtml",
14. cache: false
15. \}
16. \}
17. \}
18. \});

上面的插件会验证用户名是否必填，长度，用户名是否合法（也可以用内置的pattern进行验证），同时用ajax验证用户名是否重复啊什么的。

**有的时候**，你可能name不是都一样，比如说你要提交一组的数据，你的数据格式可能是这个样子的：

1.  <input type="text" class="username" name="member\[0\].username" />
2.  <input type="text" class="username" name="member\[1\].username" />
3.  <input type="text" class="username" name="member\[2\].username" />
4.  <input type="text" class="username" name="member\[3\].username" />
5.  <input type="text" class="username" name="member\[4\].username" />

我们当然不愿意在rules里面对5个分别写验证规则，太浪费时间，经历，那么我们可以用addClassRules方法，同样的效果，作用在对应的class上面。

1.  $.validator.addClassRules(\{ 
2.  username: \{ 
3.  required: true,
4.  minlength: 2,
5.  maxlength: 20,
6.  usernameCheck: true
7.  remote: \{ 
8.  url: "check\_username.jhtml",
9.  cache: false
10. \}
11. \}
12. \});
13. $("form").validate(); // 别忘了初始化

####  3. 验证错误了怎么办？ ####

通常这个插件都是让在验证域的后面，如果我们是一排的同name的checkbox呢？那么他会把错误信息放到第一个checkbox的后面，这样会很丑，我们当然是想放到最后一个checkbox的后面，那么我们用errorPlacement方法：

1.  $("form").validate(\{ 
2.  errorPlacement: function(error, element) \{ 
3.  if($(element).is("input\[type='checkbox'\]")) \{ 
4.  error.appendTo($(element).parent()); // 放到最后一个
5.  \} else \{ 
6.  $(element).after(error); // 放在错误域的后面
7.  \}
8.  \}
9.  \});

####  4. 验证通过了，然后呢？ ####

我们通常可能验证通过以后，并不想直接提交表单，或许我们也只是用表单进行验证，然后通过ajax提交表单，那么我们可以用submitHandler方法：

1.  $("form").validate(\{ 
2.  submitHandler: function(form) \{ 
3.  // 验证成功以后做点你想做的事情
4.  form.submit(); // 如果不想提交，就return false。
5.  \}
6.  \});

####  5. 怎么通过js直接验证？ ####

有的时候，即使我们没有编辑这个域，我们也想要验证这个域是否正确，那么怎么办？用valid()方法。这个方法可以作用到一个form，也可以作用到一个域，验证的同时，返回true/false值。

1.  var v = $("input").valid();
2.  var b = $("form").valid();