简单来说,使用jQuery Validate做前台校验的核心步骤有以下几个:
1,为需要校验的输入框添加对应的校验标识,比如密码输入框要加一个 password的校验标识。
2,jQuery Validate根据校验标识查找对应的校验规则。
3,根据校验规则和输入框的值进行判断是否校验通过,如果不通过则查找对应的提示信息显示。
4,全部校验通过则可以发送请求或者提交表单。
其中校验规则是核心的部分,jQuery Validate提供了一些内置的校验规则,你也可以自子通过代码或者正则表达式自定义校验规则。
详细教程可以参考:http://www.runoob.com/jquery/jquery-plugin-validate.html
教程里面内容挺多的,我重点说一下,实际使用的情况,以及自定义校验规则。那么首先举个栗子
上代码:
引入js:
message的js你如果需要可以自己引入
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/additional-methods.js"></script>
表单:
<form class="layui-form" id="addForm" role="form" >
<div class="layui-form-item">
<label class="layui-form-label">登录账号</label>
<div class="layui-input-inline">
<input type="text" name="loginName" id="loginName" required placeholder="请输入账号" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">
<label for="loginName"></label></div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用户姓名</label>
<div class="layui-input-inline">
<input type="text" id="userName" name="userName" required placeholder="请输入用户姓名" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">
<label for="userName"></label></div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">登录密码</label>
<div class="layui-input-inline">
<input type="password" id="password" name="passwordx" required placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">
<label for="password"></label></div>
</div>
<div class="layui-form-item">
<button type="reset" hidden id="reset"></button>
</form>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" onclick="addUser()">提交</button>
<button onclick="reset()" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
校验代码:
$("#addForm").validate({
//调整错误提示的位置和样式
errorPlacement: function(error, element) {
// Append error within linked label
console.log(element);
$( element )
.closest( "form" )
.find( "label[for='" + element.attr( "id" ) + "']" )
.append(error);
},
errorElement: "font",
//校验规则 name="password",validatemethod name="passwordx"
rules:{
userName:"userName",
passwordx:"passwordCopyx"
},
});
按钮事件监听js:
function addUser(){
var password = md5($('#password').val());
var passwordCopy = md5($('#passwordCopy').val());
var loginName = $('#loginName').val();
if($("#addForm").valid()){
alert("校验全部通过了!");
}
这里有几个要注意的,首先校验要先获取表单,然后设置一下错误信息提示的展示方式,我这里因为要调整页面样式所以用的是font标签展示错误信息,那要看你自己的页面上输入框的排版样式,可以自己调节,errorElement: “font”,这里可以用label,p标签都可以。然后重点是 rules里面是校验标识和校验规则的对应关系,前面是校验表示,就是input的name 和id最好保持相同
<input type="text" name="loginName" id="loginName"
也就是
<label for="loginName">
for中的名称,后边对应的就是校验规则的名称就是 addMethod中添加的自定义校验方法的名字,那么重点来了,自定义的校验规则在哪呢?
就写在这个js中,是自定义的,
我这边的校验都是用的正则表达式
$.validator.addMethod("passwordCopyx", function(value, element) {
var tel = /^[\w.]{6,12}$/;
return tel.test(value);
},$.validator.format("*长度必须在5-10位之间,由数字或字母组成"));
$.validator.addMethod("loginName", function(value, element) {
var tel = /^([a-zA-Z]{1})(\w{1,11})$/;
return tel.test(value);
},$.validator.format("*长度在2-10位之间,必须以字母开头可以有数字不能有符号"));
其中提示信息可以在自定义校验规则里加,也可以在message.js里面加也可以写到validate.js里面,如果三个地方都写了提示信息,那么优先显示validate.js里面的提示信息
这是validate.js
messages: {
passwordx:"*长度必须在5-10位之间,由数字或字母组成!",
passwordCopyx:"*长度必须在5-10位之间,由数字或字母组成!",
required: "*不能为空!",
mobileNumber:"*电话格式不正确!",
teleNumber:"手机号码格式不正确!",
remote: "Please fix this field.",
email: "*邮箱格式不正确!",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date ( ISO ).",
number: "Please enter a valid number.",
digits: "Please enter only digits.",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
maxlength: $.validator.format( "Please enter no more than {0} characters." ),
minlength: $.validator.format( "Please enter at least {0} characters." ),
rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
range: $.validator.format( "Please enter a value between {0} and {1}." ),
max: $.validator.format( "Please enter a value less than or equal to {0}." ),
min: $.validator.format( "Please enter a value greater than or equal to {0}." )
},
这是message.js
$.extend($.validator.messages, {
required: "*不能为空",
remote: "请修正此字段",
email: "请输入有效的电子邮件地址",
url: "请输入有效的网址",
date: "请输入有效的日期",
dateISO: "请输入有效的日期 (YYYY-MM-DD)",
number: "请输入有效的数字",
digits: "只能输入数字",
creditcard: "请输入有效的信用卡号码",
mobileNumber:"*电话格式不正确",
teleNumber:"*请输入正确的手机号码",
input:"整数",
equalTo: "你的输入不相同",
/*password:"*密码格式不对!",
passwordx:"*密码格式不对!",
passwordCopyx:"*确认密码格式不对!",*/
extension: "请输入有效的后缀",
isZipCode: "只能包括中文字、英文字母、数字和下划线",
maxlength: $.validator.format("最多可以输入 {0} 个字符"),
minlength: $.validator.format("最少要输入 {0} 个字符"),
rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
max: $.validator.format("请输入不大于 {0} 的数值"),
min: $.validator.format("请输入不小于 {0} 的数值")
});
运行效果: