jquery.validate表单验证插件
2026-04-28 15:26:50
199
分类:js插件
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。
使用方法
可以自定义样式并引入,引入jquery、jquery.validate.js,如果需要扩展引入jquery.validate-expand.js
使用方法示例
$("#form").validate({
debug: true, //调试模式(表单不提交,默认为false)
ignore: '', //提交所有元素(默认不提交隐藏元素)
errorElement: "em", //自定义错误元素
rules: { //验证规则
account: {
required: true,
rangelength: [4, 20],
},
password: {
required: true,
rangelength: [6, 20]
},
confirm_password: {
required: true,
equalTo: "#password"
},
mobile: {
required: true,
isMobile: true,
remote: {
type: 'POST',
url: '',
dataType: "html",
data: {
mobile: function () {
return $("#mobile").val()
},
},
dataFilter: function (data, type) {
if (data == 0) return true;
else return "手机号码已注册";
}
}
},
code: {
required: true
},
agreement: {
required: true
},
},
messages: { //错误提示
account: {
required: "请输入昵称",
rangelength: "长度{0}~{1}之间"
},
password: {
required: "请输入密码",
rangelength: "长度在{0}~{1}个字符之间"
},
confirm_password: {
required: "请输入确认密码",
equalTo: "两次输入密码不一致"
},
mobile: {
required: "请输入手机号码"
},
code: {
required: "请输入手机校验码"
},
agreement: {
required: "请阅读并同意用户协议"
},
},
success: function (label) {
label.addClass("success");
},
errorPlacement: function (error, element) {
var $ele = $(element);
if ($ele.attr('name') == 'code') {
$ele.parent().find('#get_code').after(error);
} else if (($ele.attr('name') == 'agreement')) {
$ele.parent().find('b').after(error);
} else {
$ele.after(error);
}
},
showErrors: function (errorMap, errorList) {
this.defaultShowErrors();
errorList.forEach(function (ele) {
$(ele.element).parent().find('.error').removeClass('success');
});
},
submitHandler: function () {
//验证成功,可以提交了
}
});下载地址: