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

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

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

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

详细内容请见原文链接：http://www.gbtags.com/gb/share/5765.htm

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

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

jQuery.extend(jQuery.validator.messages, {

required: "必选字段",

remote: "请修正该字段",

email: "请输入正确格式的电子邮件",

url: "请输入合法的网址",

date: "请输入合法的日期",

dateISO: "请输入合法的日期 (ISO).",

number: "请输入合法的数字",

digits: "只能输入整数",

creditcard: "请输入合法的信用卡号",

equalTo: "请再次输入相同的值",

accept: "请输入拥有合法后缀名的字符串",

maxlength: jQuery.validator.format("请输入一个长度最多是 {0} 的字符串"),

minlength: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"),

rangelength: jQuery.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),

range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),

max: jQuery.validator.format("请输入一个最大为 {0} 的值"),

min: jQuery.validator.format("请输入一个最小为 {0} 的值")

});

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

$.validator.setDefaults({

errorClass: "fieldError", // 错误的时候添加什么class

ignore: ".ignore", // 默认忽略那些域的验证

ignoreTitle: true,

onkeyup: false,

errorPlacement: function(error, element) {

// 有错误了怎么办

},

submitHandler: function(form) {

// 所有验证通过怎么办

}

});

2. 添加验证的规则

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

$("#form").validate({

debug:true, //调试模式

rules:{

username:{

required:true, //开启必填项

rangelength:[3,10] //请输入的数值在3至10位之间

};

};

});

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

$.validator.addMethod("usernameCheck", function(value, element){

return /^[0-9a-z_A-Z]+$/.test(value);

}, "用户名格式错误");

$("form").validate({

rules: {

username: {

required: true,

minlength: 2,

maxlength: 20,

usernameCheck: true

remote: {

url: "check_username.jhtml",

cache: false

}

}

}

});

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

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

<input type="text" class="username" name="member[0].username" />

<input type="text" class="username" name="member[1].username" />

<input type="text" class="username" name="member[2].username" />

<input type="text" class="username" name="member[3].username" />

<input type="text" class="username" name="member[4].username" />

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

$.validator.addClassRules({

username: {

required: true,

minlength: 2,

maxlength: 20,

usernameCheck: true

remote: {

url: "check_username.jhtml",

cache: false

}

}

});

$("form").validate(); // 别忘了初始化

3. 验证错误了怎么办？

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

$("form").validate({

errorPlacement: function(error, element) {

if($(element).is("input[type='checkbox']")) {

error.appendTo($(element).parent()); // 放到最后一个

} else {

$(element).after(error); // 放在错误域的后面

}

}

});

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

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

$("form").validate({

submitHandler: function(form) {

// 验证成功以后做点你想做的事情

form.submit(); // 如果不想提交，就return false。

}

});

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

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

var v = $("input").valid();

var b = $("form").valid();

6. 还有更多功能，这里就不介绍了，大家可以看上面提供的官网和博客地址。

代码演示：http://www.gbtags.com/gb/rtreplayerpreview/1140.htm

详细内容请见原文链接：http://www.gbtags.com/gb/share/5765.htm