一、常见的表单验证插件
在项目开发过程中,我们需要对前台输入的一些数据进行校验,以到我我们要求的格式,这就难免要写很多正则表单式来进行判断,这是一件很费时的时,所有就出现了了一些表单验证框架,以下几种,是常见的:
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中
推荐链接
您阅读本篇文章共花了： 大家都在找：
jquery：jquery菜鸟教程
前端：前端和后端的区别
javascript：javascript是什么
发表评论