JQuery表单验证【八】

最新推荐文章于 2021-05-14 17:07:29 发布

Joss_dzy

最新推荐文章于 2021-05-14 17:07:29 发布

阅读量640

点赞数

分类专栏： Jquery 前端文章标签： JQuery

本文链接：https://blog.csdn.net/Joss_dzy/article/details/80565017

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

Jquery

4 篇文章 0 订阅

订阅专栏

-- 表单验证的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" />

<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>

Joss_dzy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery表单验证【八】

-- 表单验证的validation插件 --一．jQuery插件的概述 jQuery提供了第三方插件支持功能，任何的第三方厂商都可以针对jQuery再开发新的功能对jQuery的功能进行增强，称为jQuery的插件 validate插件作用：就是用来对用户在表单上输入的数据进行验证，如果验证不通过，表单不能提交。验证原则：已经创建了一些通用的验证器，我们直接使用验证器就可以了。 1) 指定...
复制链接

扫一扫

专栏目录