一、 jQuery Validate 插件的介绍
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。
该插件是由 Jörn Zaefferer 编写和维护的,他是 jQuery 团队的一名成员,是 jQuery UI 团队的主要开发人员,是 QUnit 的维护人员。
最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation。Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评。
官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/
在线文档:http://docs.jquery.com/Plugins/Validation
在线 API:http://jquery.bassistance.de/api-browser/plugins.html
配置说明:http://docs.jquery.com/Plugins/Validation/validate#options
项目介绍:http://plugins.jquery.com/project/validate
Github:https://github.com/jzaefferer/jquery-validation
二、jQuery Validate 拥有的特点介绍
作为一个标准的验证方法库,jQuery Validate 拥有以下的特点:
(1)内置验证规则。拥有必填、数字、Email、URL和信用卡号码等19类内置验证规则。功能强大的 jQuery 表单验证插件,适用于日常的 E-mail、电话号码、网址等验证及 Ajax 验证,除自身拥有丰富的验证规则外,还可以添加自定义的验证规则。
兼容 IE 6+, Chrome, Firefox, Safari, Opera 10+ 。
(2)自定义验证规则。可以很方便地自定义验证规则。
(3) 简单,强大的信息提示。默认了验证信息提示,并提供自定义覆盖默认的提示信息的功能。
(4) 实时验证:通过keyup 或是blur事件来触发校验,而不仅仅是提交的时候进行校验。
三、jQuery Validate 的下载地址
(1)官网下载地址 :http://jqueryvalidation.org/
(2)Github 开源项目: https://github.com/jzaefferer/jquery-validation
四、校验规则说明
校验规则是指表单元素需要做哪些方面的验证,例如:非空即必填字段,邮箱格式验证,日期格式验证等。
(1)required:true 必输字段
(2)remote:"check.shtml" 使用ajax方法调用check.shtml验证输入值
(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
五、简单案例演示
1.需要引入jQuery库和Validation插件,而且必须先导入jQuery库,再导入Validation。
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
2.页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<!-- Css -->
<style type="text/css">
.tab{
width: 800px;
height: 300px;
}
.tab,.tab tr td{
border: 1px solid darkgray;
}
.tab tr th{
color: green;
}
.t_right{
text-align: right;
width: 15%;
}
</style>
<!-- 导入jquery库和validation插件 -->
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/messages_zh.min.js"></script>
<!-- 编写js代码 -->
<script type="text/javascript">
$(function(){
//使用表单元素调用validata()校验方法
$("form").validate();
})
</script>
</head>
<body>
<!-- 表单页面HTML代码,其中需要校验的每个表单元素都设置了校验规则 -->
<form action="/" method="post">
<table border="1" class="tab" cellspacing="0" align="center">
<tr>
<th colspan="2">用户注册</th>
</tr>
<tr>
<td class="t_right">用户名:</td>
<td><input type="text" name="username" required="true" rangelength="[3,6]"/></td>
</tr>
<tr>
<td class="t_right">密码:</td>
<td><input type="password" id="pwd1" name="pwd1" required="true" rangelength="[6,16]"/></td>
</tr>
<tr>
<td class="t_right">确认密码:</td>
<td><input type="password" name="pwd2" required="true" rangelength="[6,16]" equalTo="#pwd1" /></td>
</tr>
<tr>
<td class="t_right">Email:</td>
<td><input type="text" name="email" required="true" email="email"/></td>
</tr>
<tr>
<td class="t_right">出生日期:</td>
<td><input type="text" name="birthday" required="true" dateISO="yyyy-MM-dd"/></td>
</tr>
<tr style="text-align: center;">
<td colspan="2"><input type="submit" name="sub" value="注 册"/></td>
</tr>
</table>
</form>
</body>
</html>
3.效果图
4.案例说明
(1)首先需要引入jquery-3.6.0.min.js,因为这个插件是在JQuery的基础上进行的。
(2)引入校验插件jquery.validate.min.js 。
(3)引入提示本地化脚本messages_zh.min.js。验证信息的国际化,默认验证提示是英文的,导入messages_zh.min.js已写好的国际化文件就可实现汉化错误提示消息。
(4)在input框的class属性中添加要校验规则。针对不同的字段,进行验证规则编码,设置字段相应的属性。
例如:
(5)确定哪个表单被校验,使用表单对象调用validate()校验方法。
<!-- 编写js代码 -->
<script type="text/javascript">
$(function(){
//使用表单元素调用validata()校验方法
$("form").validate();
})
</script>
到此,使用validation插件的表单验证看似结束了。但上面的验证方式存在两个弊端:
1. 不能自定义错误提示消息;
2. 验证规则都写在页面的表单元素中,代码可读性差。
下面,我们对此进行优化,在给表单绑定validate()方法时,通过参数指定验证规则和自定义提示消息。
六、优化表单验证
1.主要优化部分为validate()方法调用内部,使用rules定义校验规则,把原来定义在表单元素中的校验规则提取到这里定义;使用messages定义错误提示消息。
<!-- 优化部分 -->
<script type="text/javascript">
$(function(){
//优化表单验证方法
$("form").validate({
rules:{
"username":{
required:true,
rangelength:[3,6]
},
"pwd1":{
required:true,
rangelength:[6,16]
},
"pwd2":{
required:true,
rangelength:[6,16],
equalTo:"#pwd1"
},
"email":{
required:true,
email:"email"
},
"birthday":{
required:true,
dateISO:"yyyy-MM-dd"
}
},
messages:{
"username":{
required:"用户名不能为空",
rangelength:"用户名长度必须在3-6个字符之间"
},
"pwd1":{
required:"密码不能为空",
rangelength:"密码长度必须在6-16个字符之间"
},
"pwd2":{
required:"确认密码不能为空",
rangelength:"密码长度必须在6-16个字符之间",
equalTo:"两次密码不一致"
},
"email":{
required:"邮箱不能为空",
email:"邮箱格式不正确"
},
"birthday":{
required:"出生日期不能为空",
dateISO:"日期格式不正确"
}
}
});
})
</script>
2.定义错误提示消息样式
/*
定义错误提示消息的样式,这里需要关注一下插件的源码,
当出现错误时会为每个表单增加一个label标签显示错误消息,
而lable标签中自动引用了class="error"的类样式,因此在
这里直接定义一个error样式,就可以直接被引用。
*/
.error{
font-size: 12px;
color: red;
}
3.效果图
4.优化后的完整案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>优化表单验证</title>
<!-- Css -->
<style type="text/css">
.tab{
width: 800px;
height: 300px;
}
.tab,.tab tr td{
border: 1px solid darkgray;
}
.tab tr th{
color: green;
}
.t_right{
text-align: right;
width: 15%;
}
/*
定义错误提示消息的样式,这里需要关注一下插件的源码,
当出现错误时会为每个表单增加一个label标签显示错误消息,
而lable标签中自动引用了class="error"的类样式,因此在
这里直接定义一个error样式,就可以直接被引用。
*/
.error{
font-size: 12px;
color: red;
}
</style>
<!-- 导入jquery库和validation插件 -->
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/messages_zh.min.js"></script>
<!-- 优化部分 -->
<script type="text/javascript">
$(function(){
//优化表单验证方法
$("form").validate({
rules:{
"username":{
required:true,
rangelength:[3,6]
},
"pwd1":{
required:true,
rangelength:[6,16]
},
"pwd2":{
required:true,
rangelength:[6,16],
equalTo:"#pwd1"
},
"email":{
required:true,
email:"email"
},
"birthday":{
required:true,
dateISO:"yyyy-MM-dd"
}
},
messages:{
"username":{
required:"用户名不能为空",
rangelength:"用户名长度必须在3-6个字符之间"
},
"pwd1":{
required:"密码不能为空",
rangelength:"密码长度必须在6-16个字符之间"
},
"pwd2":{
required:"确认密码不能为空",
rangelength:"密码长度必须在6-16个字符之间",
equalTo:"两次密码不一致"
},
"email":{
required:"邮箱不能为空",
email:"邮箱格式不正确"
},
"birthday":{
required:"出生日期不能为空",
dateISO:"日期格式不正确"
}
}
});
})
</script>
</head>
<body>
<form id="regist" action="/" method="post">
<table border="1" class="tab" cellspacing="0" align="center">
<tr>
<th colspan="2">用户注册</th>
</tr>
<tr>
<td class="t_right">用户名:</td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td class="t_right">密码:</td>
<td><input type="password" id="pwd1" name="pwd1"/></td>
</tr>
<tr>
<td class="t_right">确认密码:</td>
<td><input type="password" name="pwd2"/></td>
</tr>
<tr>
<td class="t_right">Email:</td>
<td><input type="text" name="email"/></td>
</tr>
<tr>
<td class="t_right">出生日期:</td>
<td><input type="text" name="birthday"/></td>
</tr>
<tr style="text-align: center;">
<td colspan="2"><input type="submit" name="sub" value="注 册"/></td>
</tr>
</table>
</form>
</body>
</html>
总结完毕,技术道路上有你有我,新时代农民工加油!!!