加速你的开发系列- 使用validate 校验器的心得

最新推荐文章于 2025-01-24 10:31:54 发布

最新推荐文章于 2025-01-24 10:31:54 发布 · 139 阅读

文章标签：

本文介绍了如何使用jQuery的验证插件实现表单字段的有效验证，包括利用自定义方法检查特定格式的内容，设置分组验证以及调整验证成功后的样式等。

1.rule 里面的设定的各个项是以name 做为关键字，莫以id做为唯一值。谨记

2.jQuery.validator.format 的使用列子

$("button").click(function () {
var str = "Hello {0}, this is {1}";
alert("'" + str + "'");

str = jQuery.validator.format(str, "World", "Bob");
alert("'" + str + "'");
});

使用自定义的校验方法必须包含 id唯一确定的名字，校验function（）及返回验证信息
jQuery.validator.addMethod("domain", function(value, element) {
return this.optional(element) || /^http:\/\/mycorporatedomain.com/.test(value);
}, "Please specify the correct domain for your documents");

3.即我们自定义这个方法后，然后在rule中相关的字段配置使用该方法

例子如下：
//可以在customerValidate.js 设定
jQuery.validator.addMethod("stringCheck", function(value, element) {
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "只能包括中文字、英文字母、数字和下划线");

rules: {
username: {
required:true,
stringCheck:true,
byteRangeLength:[3,15] //注意：如这里
},
},
/**//* 设置错误信息 */
messages: {
username: {
required: "请填写用户名",
stringCheck: "用户名只能包括中文字、英文字母、数字和下划线",
byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)" //注意：如这里
}
}

4.使用group定义
http://docs.jquery.com/Plugins/Validation/validate#options
$(document).ready(function(){
$("#myform").validate({
groups: {
username: "fname lname"
},
errorPlacement: function(error, element) {
if (element.attr("name") == "fname"
|| element.attr("name") == "lname" )
error.insertAfter("#lastname");
else
error.insertAfter(element);
},
debug:true
})
});

5。修改validate的成功的css
$("#myform").validate({
success: "valid",
submitHandler: function() { alert("Submitted!") }
})