您的位置：首页 > Web前端 > JQuery

jQuery表单验证插件—jquery-validate

2017-09-12 16:00 351 查看
一、jQuery-validate介绍

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

该插件是由 Jörn Zaefferer 编写和维护的，他是 jQuery 团队的一名成员，是 jQuery UI 团队的主要开发人员，是 QUnit 的维护人员。

下载地址：https://github.com/jquery-validation/jquery-validation/tags

二、默认校验规则



默认提示：



三、使用方式

注意：

这里使用的jQuery的版本为3.1.1，jQuery.validate的版本为1.9.0，如果表单验证插件的版本更高的话，效果可能不一样，因为写法可能要改下，具体检查下源码。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery validation plug-in - main demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="../static/css/screen.css" />
<script type="text/javascript" src="../static/js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="../static/js/jquery.validate.js"></script>

</head>
<body>
<p>员工信息录入</p>
<form name="empForm" id="empForm" method="post" action="test.html">
<table border=1>
<tr>
<td>真实姓名(不能为空 ,没有其他要求)</td>
<td><input type="text" id="realname" name="realname" />
</td>
</tr>
<tr>
<td>登录名(登录名不能为空,长度应该在5-8之间,可以包含中文字符(一个汉字算一个字符)):</td>
<td><input type="text" id="username" name="username" /></td>
</tr>
<tr>
<td>密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td>
<td><input type="password" id="psw"  name="psw" style="width:120px" /></td>
</tr>
<tr>
<td>重复密码密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td>
<td><input type="password" id="psw2" name="psw2" style="width:120px" /></td>
</tr>
<tr>
<td>性别(必选其一)</td>
<td>
<input  type="radio" id="gender_male" value="m" name="gender"/>男
<input  type="radio" id="gender_female" value="f" name="gender"/>女
<label  style="display: none" for="gender" class="error">请选择性别</label>
</td>
</tr>
<tr>
<td>年龄(必填26-50):</td>
<td><input type="text" id="age" name="age" /></td>
</tr>
<tr>
<td>你的学历:</td>
<td> <select name="edu" id="edu">
<option value="">－－请选择你的学历－－</option>
<option value="a">专科</option>
<option value="b">本科</option>
<option value="c">研究生</option>
<option value="e">硕士</option>
<option value="d">博士</option>
</select>
</td>
</tr>
<tr>
<td>出生日期(1982/09/21):</td>
<td><input type="text" id="birthday"  name="birthday" style="width:120px" value="" /></td>
</tr>
<tr>
<td>兴趣爱好:</td>
<td colspan="2">
<input type="checkbox" name="checkbox1" id="qq1"/>乒乓球
<input type="checkbox" name="checkbox1" id="qq2" value="1" />羽毛球
<input type="checkbox" name="checkbox1" id="qq3" value="2" />上网
<input type="checkbox" name="checkbox1" id="qq4" value="3" />旅游
<input type="checkbox" name="checkbox1" id="qq5" value="4" />购物
<label  style="display: none" for="checkbox1" class="error">您的兴趣爱好,至少选择一个</label>
</td>
</tr>
<tr>
<td align="left">电子邮箱:</td>
<td><input type="text" id="email" style="width:120px" name="email" /></td>
</tr>
<tr>
<td align="left">身份证(15-18):</td>
<td><input type="text" id="cart"  style="width:200px" name="cart" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="submit"  name="firstname"  id="firstname" value="保存"></td>
</tr>
</table>

</form>
<script >
//验证身份证号码的长度
$.validator.addMethod("cartLength",function (value) {
var length = value.length;
if (length != 15 && length != 18) {
return false;
}
return true;
});
//验证身份证号码的格式
$.validator.addMethod("cartCheck",function (value) {
var length = value.length;
var flag;
if (length == 15) {
var pattern = /^[0-9]{15}$/;
flag = pattern.test(value);
}
if (length == 18) {
var pattern = /^[0-9]{18}|[0-9]{17}x|[0-9]{17}X$/;
flag = pattern.test(value);
}
return flag;
});
$(function () {
$("#empForm").validate({
rules:{
realname:"required",
username:{
required:true,
rangelength: [5, 8]
},
psw:{
required:true,
rangelength: [6, 12]
},
psw2:{
required:true,
rangelength: [6, 12],
equalTo:"#psw"
},
gender:{
required:true
},
age:{
required:true,
range:[26,50]
},
edu:{
required:true
},
birthday:{
required:true,
dateISO:true
},
checkbox1:{
required:true
},
email:{
required:true,
email:true
},
cart:{
required:true,
cartLength:true,
cartCheck:true
}
},
messages:{
realname:"真实姓名不能为空",
username:{
required:"登录名不能为空",
rangelength: "登录名长度应该在5-8之间"
},
psw:{
required:"密码不能为空",
rangelength: "密码长度应该在6-12之间"
},
psw2:{
required:"重复密码不能为空",
rangelength: "重复密码长度应该在6-12之间",
equalTo:"两次密码不一致"
},
age:{
required:"年龄不能为空",
range:"年龄范围应该在26-50之间"
},
edu:{
required:"学历不能为空"
},
birthday:{
required:"出生日期不能为空",
dateISO:"出生日期格式不正确"
},
email:{
required:"email不能为空",
email:"email格式不正确"
},
cart:{
required:"身份证号码不能为空",
cartLength:"身份证号码长度不正确",
cartCheck:"身份证格式不正确"
}
}
});
});
</script>
</body>
</html>


效果：



我们可以知道rules是表示验证规则，messages是表示错误提示信息，并且默认错误提示信息，放置在页面的表单中第一个控件后面。

要点：

1、配置验证规则时是传入一个json格式的字符串，key对应为表单元素的name属性的值，value则为上图的验证方法。

2、 在jquery表单验证框架运行时，原理如下：

首先，表单验证框架会在页面中查找对应的label标签

在页面中查找对应label标签，错误提示信息就提示页面中label标签内的文本信息
在页面中没有找到对应label标签，就通过验证框架底层创建一个label标签进行错误信息的提示


下面来具体讲下这个过程是怎么样的吧，就拿这个性别单选框举例：

<label  style="display: none" for="gender" class="error">请选择性别</label>


咋一看，为什么要给这个控件设置for、class、style呢，我们来看看这个插件的源码：





那四行代码的意思是：

label = $("<" + this.settings.errorElement + "/>")                     ——>//<label></label>
.attr({"for":  this.idOrName(element), generated: true}) ——>//<label for="gender"></label>
.addClass(this.settings.errorClass)        ——>//<label for="gender" class="error"></label>
.html(message || "");            ——>//<label for="gender" class="error">请选择性别</label>


现在我们应该知道这个表单元素的for、class、style的意思了吧：

for：值对应的是页面表单中name属性的值

class：设置样式，设置"error"样式

style："display: none"，设置成隐藏


这个懂了，复选框同理。

接下来再讲一个自定义验证规则，就像上面代码的身份证的验证，这个是固定写法：

$.validator.addMethod(name,method,message);


name：添加的验证方法的名字

method：具体验证方法，是一个函数，function(value,element,param){ }

value:对应页面种元素的value属性值

element:对应页面中的元素

param: 参数


message：错误提示信息

这个message我们一般都不写在这，写在和默认的验证规则一样的地方即messages中。

上面身份证自定义了两个验证规则，一个是验证长度，一个是验证格式。

验证长度：身份证要么为15位，要么为18位。

验证格式：

第一种情况：如果长度为15时，应该15位都为0-9之间的数字

第二种情况：如果长度为18时，要么18位都是0-9之间的数据，要么前17位都为0-9之间的数据，最后一位为x或者X，使用正则表达式匹配这三种情况。


怎么样呢，是不是感觉也不难呢，那就赶紧动手试试吧！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航