jQuery Validate
jQuery Validate技术文档
什么是jQuery Validate
jQuery Validate是一款基于jQuery的开源插件,主要用于表单验证。它提供了多种验证方式,例如必填、数字、邮箱、手机等常用验证规则,同时也支持自定义规则。使用jQuery Validate可以简便地实现前端表单的验证功能,同时还可以优化用户体验。
基本使用方法
引入jQuery和jQuery Validate
在标签中引入jQuery和jQuery Validate:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
为表单添加id和name
为需要验证的表单元素添加id和name属性,例如:
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<button type="submit">提交</button>
</form>
编写验证规则
使用$.validator.addMethod()方法可以添加自定义的验证规则:
$.validator.addMethod("phone", function(value, element) {
var reg = /^1[3|4|5|7|8][0-9]{9}$/;
return this.optional(element) || reg.test(value);
}, "请输入正确的手机号码");
初始化验证器
使用$.validate()方法初始化验证器,同时可以配置验证规则和错误提示信息:
$("form").validate({
rules: {
username: {
required: true,
minlength: 4,
maxlength: 16
},
password: {
required: true,
minlength: 6,
maxlength: 16
},
phone: {
phone: true
}
},
messages: {
username: {
required: "请输入用户名",
minlength: "用户名长度不能少于4个字符",
maxlength: "用户名长度不能超过16个字符"
},
password: {
required: "请输入密码",
minlength: "密码长度不能少于6个字符",
maxlength: "密码长度不能超过16个字符"
},
phone: {
phone: "请输入正确的手机号码"
}
}
});
验证规则配置
常用的验证规则
- required - 必填项
- number - 数字
- email - 邮箱
- url - 网址
- date - 日期(格式为yyyy-mm-dd)
可以在rules中配置这些默认的验证规则,例如:
rules: {
username: {
required: true,
minlength: 4,
maxlength: 16
},
email: {
required: true,
email: true
},
phone: {
required: true,
phone: true
}
}
自定义验证规则
使用$.validator.addMethod()方法可以添加自定义的验证规则,例如:
$.validator.addMethod("phone", function(value, element) {
var reg = /^1[3|4|5|7|8][0-9]{9}$/;
return this.optional(element) || reg.test(value);
}, "请输入正确的手机号码");
验证规则参数
可以在验证规则后添加参数,例如:
rules: {
password: {
required: true,
minlength: 6,
maxlength: 16
},
confirm_password: {
required: true,
equalTo: "#password"
}
}
以上配置表示确认密码必须和密码相同。
错误提示信息配置
使用messages配置项可以为每个表单元素设置错误提示信息,例如:
messages: {
username: {
required: "请输入用户名",
minlength: "用户名长度不能少于4个字符",
maxlength: "用户名长度不能超过16个字符"
},
email: {
required: "请输入邮箱地址",
email: "请输入正确的邮箱地址"
},
password: {
required: "请输入密码",
minlength: "密码长度不能少于6个字符",
maxlength: "密码长度不能超过16个字符"
},
confirm_password: {
required: "请再次输入密码",
equalTo: "两次输入的密码不一致"
}
}
在messages中设置了每个表单元素对应的错误提示信息。
验证前和验证后的回调函数
使用$.validate()方法可以传递验证成功和验证失败的回调函数,例如:
$("form").validate({
submitHandler: function(form) {
alert("提交成功!");
},
invalidHandler: function() {
alert("表单验证失败!");
}
});
submitHandler用于在表单验证通过后执行的回调函数,invalidHandler用于在表单验证失败后执行的回调函数。
总结
jQuery Validate是一款非常实用的表单验证插件,可以简洁地实现前端表单验证功能。本文介绍了jQuery Validate的基本使用方法和常用配置项,通过细致的实例化介绍,你现在已经可以轻松上手jQuery Validate。