下载、安装
方法一:借用npm安装:
npm install jquery
npm i jquery-validation
方法二:
从 jquery.com 下载 jQuery 库
访问 jQuery Validate 官网,下载最新版的 jQuery Validate 插件。
引用
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
使用
<form id="login">
<div>
<label for="account">账号</label>
<input id="account" name="account" class="required"/><br/>
</div>
<input type="submit" value="提交"/>
</form>
使用默认的校验
$().ready(function () {
$('#login').validate({
errorPlacement: function (error, element) { // 添加报错提醒
error.appendTo(element.parent());
},
// 添加规则方法一
// rules:{
// account:{
// maxlength:3,
// digits:true // 必须是数字
// }
// },
})
// 添加规则方法二
$('#account').rules("add", {
required: true
});
// 中文
$.extend($.validator.messages,{
required:"这是必填字段"
})
});
自定义校验
$().ready(function () {
$('#login').validate({
errorPlacement: function (error, element) {
error.appendTo(element.parent());
}
});
$('#account').rules("add", {
numberForMe: true
});
});
jQuery.validator.addMethod('numberForMe', function (value,element) {
// 校验部分
var reg = /^[1-9][0-9]+$/gi // 正则
// if (reg.test(value)) {
// // test() 方法用于检测一个字符串是否匹配某个模式.语法RegExpObject.test(string)
// return true
// } else {
// return false
// }
return this.optional(element) || reg.test(value);
}, $.validator.format("请输入数字")
);
errorPlacement() 可以自定义错误信息显示的位置
方法:function(error, element)
参数:①.error:规定用来放置错误信息的元素,由errorElement属性配置
②.element:规定当前表单元素对象。
addMethod () 添加除内置的 Validation 方法之外的验证方法
方法:$.validator.addMethod(name,function(value , element){ return true||false },message);
参数:①:用于type匹配的名称,自定义。
②:是一个function函数,决定了验证是否成功!里面是自定义验证。
③:当验证不成功时返回的提示错误信息。
test() 方法用于检测一个字符串是否匹配某个模式. 如果字符串中有匹配的值返回 true ,否则返回 false。
方法:RegExpObject.test(string)
参考文章:
jQuery表单验证(Validate)使用方法 - 百度文库
jQuery Validate教程_风神修罗使的博客-CSDN博客