jquery validation-jquery的验证框架 详解（4）

单页面多表单的jquery 验证怎么办？想要添加自定义的验证函数怎么办？

不知道大家有没有做过 在一个页面上多个表单进行不同数据的添加和更新操作。通常 我们都是通过Ajax的方式来提交这个表单的数据至服务器

第一：如果单个页面上有多个表单的话 又需要给这些表单注册一些常用参数怎么办？

　 $("#Form1,#Form2").validate({
　　　　errorElement: "div", //错误信息的包装标签
　　　　wrapper: "li", //错误信息包装标签的父标签
　　　　onfocusout: false, //禁止失去焦点时验证
　　　　onkeyup: false, //禁止按键时验证
　　　　errorClass: "ErrorMsg", //错误信息的class
　　　　onclick: false, //禁止checkbox,radiobutton点击时验证
　　　　errorLabelContainer: $('#ErrorMsgContainer'), //包装所有error的容器
　　　　ignore: ".ignore"
　　});

以上方式 貌似只能注册到第一个表单 这个时候 我们需要取巧

我一般是用一个each

$("form").each(function () {
$(this).validate({
errorElement: "div", //错误信息的包装标签
wrapper: "li", //错误信息包装标签的父标签
onfocusout: false, //禁止失去焦点时验证
onkeyup: false, //禁止按键时验证
errorClass: "ErrorMsg", //错误信息的class
onclick: false, //禁止checkbox,radiobutton点击时验证
errorLabelContainer: $('#ErrorMsgContainer'), //包装所有error的容器
ignore: ".ignore"
});
});

这样给每个表单注册。不然，如果采用第一种方式 绝对只有第一个表单才会有效果。第二个表单是失效的

第二：自定义函数

jquery validation插件中提供了一个扩展方法。不管是remote还是针对一般的input的验证 我们都可以使用这个扩展方法

View Code

jQuery.validator.addMethod("rVerificationCode", function (value, element, param) {
switch (element.nodeName.toLowerCase()) {
case 'select':
var options = $("option:selected", element);
return options.length > 0 && (element.type == "select-multiple" || ($.browser.msie && !(options[0].attributes['value'].specified) ? options[0].text : options[0].value).length > 0);
case 'input':
if (this.checkable(element))
return this.getLength(value, element) > 0;
default:
return $.trim(value).length > 0;
}
}, $.format("Please enter the Verification Code."));

只需这么简单的几句话就可以搞定一个扩展函数。然后 就可以在html中使用。我们前面说了metadata自定义属性。我们直接就把这个自定义函数放在validate="{rVerificationCode:true}"中就可以了。然后 给表单注册一个验证事件 就可以完美的实现效果

你可以把这些扩展函数单独放在一个js文件中引入