jquery html5validate基于html5表单验证插件

《jquery html5validate基于html5表单验证插件》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、jQueryhtml5Validate基于HTML5表单验证插件by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=2857一、前言前3篇文章实际都是为本文做铺垫的，如果以下棋表示，前三篇是普通走棋，本篇是将军！目前市面上有不少表单验证插件，看似强大，实在糟糕！总结下，有以下一些问题：1.过多干预包括：改变了表单元素UI,为表单元素绑定过多事件等2.布局等限制包括：需要特定结构的布局，需要特定的类名或者ID3.学习成本

2、包括：N多元作者自定义的属性，或者自定义的特定的数据结构4.可用性当JS出现错误的时候而无法正常运作的时候，验证就是聋子的耳朵——摆设，即使在现代浏览器下也是如此。面向未来的表单验证1.验证驱动验证信息HTML驱动，例如HTML5中required, pattern, multiple等2.验证形式非即时响应，submit验证，如Chrome浏览器的处理；或者弱即时响应，如FireFox浏览器仅仅红色外发光。3.验证交互浮动形式，尖角指示。换言之，所谓面向未来的表单验证，是遵循W3CHTML5规范的表单验证，我们可以从目前领先的浏览器中看到

3、大致雏形。而本文所有展示的html5Validate表单验证插件，就是基于这个未来设计的。二、html5Validate概述html5Validate插件的验证机制、交互形式甚至形式与Chrome浏览器HTML5表单内置验证走的很近。在使用的时候，就是写写原生的HTML5表单代码。我只想说：走阳光大道和过独木桥的感觉是完全不一样的。举个简单例子，一个邮箱验证，HTML5代码表示应该是下面这个样子：好巧的是，使用html5Validate进行表单验证的时候，也是使用上面这段HTML代码！类

4、似下面的绑定：$("form").html5Validate();于是，您在提交表单的时候会（在各个浏览器下）看到这样子的提示： 跟Chrome浏览器下的提示文字近似： html5Validate支持我所知的HTML5验证相关的东西，如type="email", type="number", type="tel", type="url", step, min, max, required,pattern, multiple等，并有一些本地化扩展，如增加了type="zipcode"邮编等，支持type="hidden"的完整验证（HTML5

5、中是忽略的），支持多type共存，例如type="email

6、tel",可以让文本框输入邮箱或者手机号码。type="date", type="hour", type="password"等因为不同网站规则不一样，因此，没有放在html5Validate中，不过，您可以很简单地进行扩展，使您的项目支持之，这个后面会介绍（参见part9-4）。为了满足实际开发需求，额外增加了四个自定义属性值：data-key, data-target, data-min, data-max.具体何用，下面会详细讲解。支持自动的全角转半角。注意：type="s

7、ubmit", type="reset", type="file", type="image"以及disabled的表单元素没有验证性可言，因此，下面所说的表单元素，并不包括他们。兼容性html5Validate通过jQuery1.4+测试，支持正常IE6-IE10浏览器，FireFox,Chrome等现代浏览器。三、demo、使用以及资源下载您可以狠狠地点击这里：html5Validate表单验证jQuery插件测试demo//zxx:还有一些实际应用的例子将会在本文后半部分展示。使用1.引用jQuery框架，示意：

8、"http://code.jquery.com/jquery-1.6.4.min.js">2.引用html5Validate插件，示意：1.绑定调用：$().html5Validate(callback,options);示意，假设测试表单id为html5Form，则有：$("#html5Form").html5Validate(function

9、(){//全部验证通过，该干嘛干嘛~~});下载未压缩版JS：jquery-html5Validate.js压缩版JS：jquery-html5Validate-min.jszi