一、常见的表单验证插件
在项目开发过程中,我们需要对前台输入的一些数据进行校验,以到我我们要求的格式,这就难免要写很多正则表单式来进行判断,这是一件很费时的时,所有就出现了了一些表单验证框架,以下几种,是常见的:
1、jQuery Validate: 一款历史悠久的Jquery插件
2、jQuery Form Validator: 也是一款强大的验证框架
3、Validform: 号称一句代码就能实现验证
二、jQuery Validate简介
官网地址: https://jqueryvalidation.org/
Github地址: https://github.com/jquery-validation/jquery-validation
在线文档: http://docs.jquery.com/Plugins/Validation
JQuery Validation插件作为式历史悠久的jQuery插件之一,经过了全球各种项目的验证,得到了很多WEB开发者的好评,作为一个表单验证的解决方案,Validation有很多的优点,比如:
1.内置验证规则：拥有必填、数字、email、url和信用卡号码等内置验证规则；
2.自定义验证规则：可以很方便地自定义验证规则（通过$.validator.addMethod(name,method,message)实现）；
3.简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认信息提示的功能（通过设置插件中的message参数来实现）；
4.实时验证：可以通过keyup或blur事件触发验证，而不仅仅在表单提交的时候验证。
5.异步验证: 用ajax实现了服务器端远程验证
三、框架源码
去官网下载最新的JQuery Validation插件,下载下来之后解压有如下内容:
它里面提供了一些DEMO:
我将它翻译成功了中文:
▲ 合成的例子
errorcontainer-demo.html 操作中的错误消息容器
custom-messages-data-demo.html 自定义消息作为元素数据
radio-checkbox-select-demo.html 单选和复选框按钮验证表单
ajaxSubmit-integration-demo.html 与表单插件集成（AJAX提交）
custom-methods-demo.html 自定义方法和消息显示.
dynamic-totals.html 动态表单
themerollered.html 使用jQuery用户界面设计的表单
tinymce TinyMCE3 Demo
tinymce4 TinyMCE4 Demo
file_input.html 文件输入
jquerymobile.html jQuery Mobile表单验证
errors-within-labels.html 在字段标签中显示错误
requirejs/index.html 通过RequireJS加载
▲实际的例子
milk --目录 Remember The Milk signup form
marketo --目录 Marketo signup form
multipart --目录 购买并出售一套房子
captcha --目录 远程验证验证
▲测试套件
../test/ 验证测试
四、使用前提
在引入jquery validate插件前，需要先引入它所依赖的文件jquery.js
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
五、默认校验规则
jquery validate提供了一些默认的校验规则如下:
(1)、required:true 必输字段
(2)、remote:"remote-valid.jsp" 使用ajax方法调用remote-valid.jsp验证输入值
(3)、email:true 必须输入正确格式的电子邮件
(4)、url:true 必须输入正确格式的网址
(5)、date:true 必须输入正确格式的日期，日期校验ie6出错，慎用
(6)、dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(7)、number:true 必须输入合法的数字(负数，小数)
(8)、digits:true 必须输入整数
(9)、creditcard:true 必须输入合法的信用卡号
(10)、equalTo:"#password" 输入值必须和#password相同
(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
五、默认提示
jquery validate默认的提示全是英文的,提示的信息如下,在jquery.validate.js中:
messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
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}." )
}
jQuery Validate提供了中文信息提示包，位于下载包的 dist/localization/messages_zh.js，内容如下：
(function( factory ) {
if ( typeof define === "function" && define.amd ) {
define( ["jquery", "../jquery.validate"], factory );
} else {
factory( jQuery );
}
}(function( $ ) {
/*
* Translated default messages for the jQuery validation plugin.
* Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語)
*/
$.extend($.validator.messages, {
required: "这是必填字段",
remote: "请修正此字段",
email: "请输入有效的电子邮件地址",
url: "请输入有效的网址",
date: "请输入有效的日期",
dateISO: "请输入有效的日期 (YYYY-MM-DD)",
number: "请输入有效的数字",
digits: "只能输入数字",
creditcard: "请输入有效的信用卡号码",
equalTo: "你的输入不相同",
extension: "请输入有效的后缀",
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} 的数值")
});
}));
可以将该本地化信息文件 messages_zh.js 引入到页面：
<script src="js/messages_zh.js"></script>
还可以直接扩展:
$.extend($.validator.messages, {
required: "必选字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
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} 的值")
});
一般推荐使用第一种。
六、使用方式
校验规则常用的有三种方法:
1、Class用法，将校验规则写到Class中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Class用法，讲校验规则写到Class中</title>
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#commentForm").validate();
});
</script>
<style>
fieldset{ width: 500px; }
legend{ margin-left: 8px; }
.required{
color: #ff1d06;
margin-right: 5px;
}
</style>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>一个简单的验证带验证提示的评论例子</legend>
<p>
<label for="cusername">姓名</label>
<em class="required">*</em>
<input id="cusername" name="username" size="25" class="required" minlength="2" />
</p>
<p>
<label for="cemail">电子邮件</label>
<em class="required">*</em>
<input id="cemail" name="email" size="25" class="required email" />
</p>
<p>
<label for="curl">网址</label>
<em> </em><input id="curl" name="url" size="25" class="url" value="" />
</p>
<p>
<label for="ccomment">你的评论</label>
<em class="required">*</em>
<textarea id="ccomment" name="comment" cols="22" class="required"></textarea>
</p>
<p>
<input class="submit" type="submit" value="提交"/>
</p>
</fieldset>
</form>
</body>
</html>
