-- 表单验证的validation插件 --
一.jQuery插件的概述
jQuery提供了第三方插件支持功能,任何的第三方厂商都可以针对jQuery再开发新的功能
对jQuery的功能进行增强,称为jQuery的插件
validate插件作用:就是用来对用户在表单上输入的数据进行验证,如果验证不通过,表单不能提交。
验证原则:已经创建了一些通用的验证器,我们直接使用验证器就可以了。
1) 指定验证器的名字
2) 出错信息
二.validate插件的使用步骤
1. 使用步骤:
1) 下载jquery-validation插件
2) 将该插件(也就是一个js文件)导入到我们的工程中
3) 在要使用验证插件的html中引入该js文件
3.1) 先导入jQuery(lib目录下)
3.2) 导入验证框架:jquery.validate.js或jquery.validate.min.js (在dist目录下)
3.3) 如果要让默认信息提示中文,可以导入messages_cn.js (在dist\localization\目录下)
验证器:"出错误的信息"
required: "必填字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
2. 语法:
$("表单对象").validate({
rules: 验证规则,
messages: 出错信息
});
三.常用的验证规则
1. 默认的验证规则:
1) required:true 必须输入的字段。
2) remote:"check.jsp" 使用 ajax 方法调用 check.jsp 验证输入值。
3) email:true 必须输入正确格式的电子邮件。
4) url:true 必须输入正确格式的网址。
5) date:true 必须输入正确格式的日期。既验证格式,又验证有效性。
6) dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。
7) number:true 必须输入合法的数字(负数,小数)。
8) digits:true 必须输入整数。
9) creditcard: 必须输入合法的信用卡号。
10) equalTo:"#field" 输入值必须和 #field 相同。
11) accept: 输入拥有合法后缀名的字符串(上传文件的后缀)。
12) maxlength:5 输入长度最多是 5 的字符串(汉字算一个字符)。
13) minlength:10 输入长度最小是 10 的字符串(汉字算一个字符)。
14) rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。数组的写法
15) range:[5,10] 输入值必须介于 5 和 10 之间。
16) max:5 输入值不能大于 5。
17) min:10 输入值不能小于 10。
2. 注:一个表单项可以同时使用多个验证器,如果上一个验证器失败,则不会继续运行下一个验证器。
3. 修改消息的显示位置:
自己写个label,放在信息显示的信息,设置display: none
<label for="gender" class="error" style="display: none">请选择一个性别</label>
四.自定义验证规则
1. 什么时候使用:
如果自带的验证器不能满足需要的时候,我们可以写自定义的验证器
2. 语法:
$.validator.addMethod("验证器名字", function(value, element, params));
value: 表示表单控件中输入的值,如:文本框输入值
element: 表单控件对象,如:文本框
params: 验证器后写的参数,如:max:5,params就是5
返回true,表示验证通过,false表示验证失败
3. 示例:验证身份证的长度必须是15或18位
1) 文本框输入:
<input type="text" name="idcard" id="idcard"/>
2) 验证代码:
2.1) 验证规则:
a) 必须输入
b) 长度是15或18
c) 15位要全是数字
d) 18位最后一位可以是X
2.2) 验证信息:
required: "身份证号不能为空",
cardlength: "身份证长度必须是15位或18位",
cardformat15: "15位必须全是数字",
cardformat18: "18位身份证格式不正确"
3) 创建自定义验证器:
3.1) 验证身份证的长度必须是15或18位,去掉空格。
3.2) 验证15位身份证的格式,全是数字
3.3) 验证18位身份证格式,18位数字或17位数字加X
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 导入jquery -->
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<!-- 验证框架 -->
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<!-- 错误信息 -->
<script type="text/javascript" src="js/messages_cn.js"></script>
<title>我的jquery表单校验页面</title>
<style type="text/css">
p {
text-align: center;
font-size: 24px;
}
table {
margin: 0 auto;
border: 0;
}
table tr {
height: 40px;
border: 0;
}
table tr td {
padding: 0 14px;
border: 1px solid #999
}
.error {
color: red
}
</style>
</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" />
</td>
</tr>
<tr>
<td>重复密码(不能为空,长度6-12字符或数字):</td>
<td>
<input type="password" id="psw2" name="psw2" />
</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 for="gender" class="error" style="display: none">请选择一个性别</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" value="" />
</td>
</tr>
<tr>
<td>兴趣爱好:</td>
<td colspan="2">
<input type="checkbox" name="hobby" id="qq1" value="0"/>
乒乓球
<input type="checkbox" name="hobby" id="qq2" value="1" />
羽毛球
<input type="checkbox" name="hobby" id="qq3" value="2" />
上网
<input type="checkbox" name="hobby" id="qq4" value="3" />
旅游
<input type="checkbox" name="hobby" id="qq5" value="4" />
购物 </td>
</tr>
<tr>
<td align="left">电子邮箱:</td>
<td>
<input type="text" id="email" name="email" />
</td>
</tr>
<tr>
<td align="left">身份证(15或18,15位全是数字,18位最后一位可以是X):</td>
<td>
<input type="text" id="idcard" name="idcard" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="firstname" id="firstname" value="保存">
</td>
</tr>
</table>
</form>
<script type="text/javascript">
//自定义的验证器
$.validator.addMethod("cardlength", function(value, element, param){
//验证长度必须是15或18
if (value.trim().length == param[0] || value.trim().length == param[1]) {
return true;
}
return false;
});
//15位全数字
$.validator.addMethod("cardformat15", function(value, element, param){
if (param) {
if (value.trim().length == 15) {
return /^\d{15}$/.test(value);
}
}
return true;
});
//18位
$.validator.addMethod("cardformat18", function(value, element, param){
if (param) {
if (value.trim().length == 18) {
return /^\d{17}X|\d{18}$/i.test(value.trim());
}
}
return true;
});
//表单对象的方法
$("#empForm").validate({
//验证器
rules: {
//使用的是name属性,不是id
realname: {
required: true
},
//用户名
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]
},
//生日
birthday: {
required: true,
date: true
},
//邮箱
email: {
//验证器
required: true,
email: true
},
//验证身份证
idcard: {
required: true,
//验证长度必须是15或18
cardlength: [15,18],
//验证15格式:必须全是数字
cardformat15: true,
//验证18位格式:前17个是数字,最后1个可以是X,也可以18位全是数字
cardformat18: true
}
},
//出错信息
messages: {
realname: "真实姓名不能为空",
idcard: {
cardlength: "长度必须是15或18",
cardformat15: "15位必须全是数字",
cardformat18: "18位的格式不正确"
}
}
});
</script>
</body>
</html>
一.jQuery插件的概述
jQuery提供了第三方插件支持功能,任何的第三方厂商都可以针对jQuery再开发新的功能
对jQuery的功能进行增强,称为jQuery的插件
validate插件作用:就是用来对用户在表单上输入的数据进行验证,如果验证不通过,表单不能提交。
验证原则:已经创建了一些通用的验证器,我们直接使用验证器就可以了。
1) 指定验证器的名字
2) 出错信息
二.validate插件的使用步骤
1. 使用步骤:
1) 下载jquery-validation插件
2) 将该插件(也就是一个js文件)导入到我们的工程中
3) 在要使用验证插件的html中引入该js文件
3.1) 先导入jQuery(lib目录下)
3.2) 导入验证框架:jquery.validate.js或jquery.validate.min.js (在dist目录下)
3.3) 如果要让默认信息提示中文,可以导入messages_cn.js (在dist\localization\目录下)
验证器:"出错误的信息"
required: "必填字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
2. 语法:
$("表单对象").validate({
rules: 验证规则,
messages: 出错信息
});
三.常用的验证规则
1. 默认的验证规则:
1) required:true 必须输入的字段。
2) remote:"check.jsp" 使用 ajax 方法调用 check.jsp 验证输入值。
3) email:true 必须输入正确格式的电子邮件。
4) url:true 必须输入正确格式的网址。
5) date:true 必须输入正确格式的日期。既验证格式,又验证有效性。
6) dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。
7) number:true 必须输入合法的数字(负数,小数)。
8) digits:true 必须输入整数。
9) creditcard: 必须输入合法的信用卡号。
10) equalTo:"#field" 输入值必须和 #field 相同。
11) accept: 输入拥有合法后缀名的字符串(上传文件的后缀)。
12) maxlength:5 输入长度最多是 5 的字符串(汉字算一个字符)。
13) minlength:10 输入长度最小是 10 的字符串(汉字算一个字符)。
14) rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。数组的写法
15) range:[5,10] 输入值必须介于 5 和 10 之间。
16) max:5 输入值不能大于 5。
17) min:10 输入值不能小于 10。
2. 注:一个表单项可以同时使用多个验证器,如果上一个验证器失败,则不会继续运行下一个验证器。
3. 修改消息的显示位置:
自己写个label,放在信息显示的信息,设置display: none
<label for="gender" class="error" style="display: none">请选择一个性别</label>
四.自定义验证规则
1. 什么时候使用:
如果自带的验证器不能满足需要的时候,我们可以写自定义的验证器
2. 语法:
$.validator.addMethod("验证器名字", function(value, element, params));
value: 表示表单控件中输入的值,如:文本框输入值
element: 表单控件对象,如:文本框
params: 验证器后写的参数,如:max:5,params就是5
返回true,表示验证通过,false表示验证失败
3. 示例:验证身份证的长度必须是15或18位
1) 文本框输入:
<input type="text" name="idcard" id="idcard"/>
2) 验证代码:
2.1) 验证规则:
a) 必须输入
b) 长度是15或18
c) 15位要全是数字
d) 18位最后一位可以是X
2.2) 验证信息:
required: "身份证号不能为空",
cardlength: "身份证长度必须是15位或18位",
cardformat15: "15位必须全是数字",
cardformat18: "18位身份证格式不正确"
3) 创建自定义验证器:
3.1) 验证身份证的长度必须是15或18位,去掉空格。
3.2) 验证15位身份证的格式,全是数字
3.3) 验证18位身份证格式,18位数字或17位数字加X
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 导入jquery -->
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<!-- 验证框架 -->
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<!-- 错误信息 -->
<script type="text/javascript" src="js/messages_cn.js"></script>
<title>我的jquery表单校验页面</title>
<style type="text/css">
p {
text-align: center;
font-size: 24px;
}
table {
margin: 0 auto;
border: 0;
}
table tr {
height: 40px;
border: 0;
}
table tr td {
padding: 0 14px;
border: 1px solid #999
}
.error {
color: red
}
</style>
</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" />
</td>
</tr>
<tr>
<td>重复密码(不能为空,长度6-12字符或数字):</td>
<td>
<input type="password" id="psw2" name="psw2" />
</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 for="gender" class="error" style="display: none">请选择一个性别</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" value="" />
</td>
</tr>
<tr>
<td>兴趣爱好:</td>
<td colspan="2">
<input type="checkbox" name="hobby" id="qq1" value="0"/>
乒乓球
<input type="checkbox" name="hobby" id="qq2" value="1" />
羽毛球
<input type="checkbox" name="hobby" id="qq3" value="2" />
上网
<input type="checkbox" name="hobby" id="qq4" value="3" />
旅游
<input type="checkbox" name="hobby" id="qq5" value="4" />
购物 </td>
</tr>
<tr>
<td align="left">电子邮箱:</td>
<td>
<input type="text" id="email" name="email" />
</td>
</tr>
<tr>
<td align="left">身份证(15或18,15位全是数字,18位最后一位可以是X):</td>
<td>
<input type="text" id="idcard" name="idcard" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="firstname" id="firstname" value="保存">
</td>
</tr>
</table>
</form>
<script type="text/javascript">
//自定义的验证器
$.validator.addMethod("cardlength", function(value, element, param){
//验证长度必须是15或18
if (value.trim().length == param[0] || value.trim().length == param[1]) {
return true;
}
return false;
});
//15位全数字
$.validator.addMethod("cardformat15", function(value, element, param){
if (param) {
if (value.trim().length == 15) {
return /^\d{15}$/.test(value);
}
}
return true;
});
//18位
$.validator.addMethod("cardformat18", function(value, element, param){
if (param) {
if (value.trim().length == 18) {
return /^\d{17}X|\d{18}$/i.test(value.trim());
}
}
return true;
});
//表单对象的方法
$("#empForm").validate({
//验证器
rules: {
//使用的是name属性,不是id
realname: {
required: true
},
//用户名
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]
},
//生日
birthday: {
required: true,
date: true
},
//邮箱
email: {
//验证器
required: true,
email: true
},
//验证身份证
idcard: {
required: true,
//验证长度必须是15或18
cardlength: [15,18],
//验证15格式:必须全是数字
cardformat15: true,
//验证18位格式:前17个是数字,最后1个可以是X,也可以18位全是数字
cardformat18: true
}
},
//出错信息
messages: {
realname: "真实姓名不能为空",
idcard: {
cardlength: "长度必须是15或18",
cardformat15: "15位必须全是数字",
cardformat18: "18位的格式不正确"
}
}
});
</script>
</body>
</html>