一、常见的表单验证插件

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

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

       

五、默认校验规则

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 引入到页面:

还可以直接扩展:

$.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中

        Class用法,讲校验规则写到Class中                

   
        一个简单的验证带验证提示的评论例子        

                        *                    

       

                        *                    

       

                                 

       

                        *                    

       

                   

   

精彩文章

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: