jquery.validate.js【简单实用的表单验证框架】【进阶版】

 

 

 

 

之前看到jquery.validate.js插件的介绍，这个插件很不错，我大概用这个插件用了一年半，基本上各种需求都能满足。

基本的介绍了一下这个插件的基础用法，我就在这里介绍一些稍微进阶一点的用法。

这个是这个插件的官网和我找到的一个中文博客。(虽然插件的名字叫做jquery.validte.js，但其实，这个插件的名字叫jquery validation)。

基础的用法可以去看冷子欲的文章或者上面的博客，我这里就不详细介绍了。

首先最重要的一点，所有要验证的域都要在form里，同时这些域都要有name属性。

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. 代码演示：http://www.gbtags.com/gb/rtreplayerpreview/1140.htm
2. 全部内容请参见原文：http://www.gbtags.com/gb/share/5765.htm