jQuery Validate详解

一、常见的表单验证插件

在项目开发过程中,我们需要对前台输入的一些数据进行校验,以到我我们要求的格式,这就难免要写很多正则表单式来进行判断,这是一件很费时的时,所有就出现了了一些表单验证框架,以下几种,是常见的:

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>