《jQuery html5Validate基于HTML5表单验证插件》由会员分享，可在线阅读，更多相关《jQuery html5Validate基于HTML5表单验证插件（25页珍藏版）》请在金锄头文库上搜索。
1、jQuery html5Validate 基于基于 HTML5 表单验表单验证插件证插件by zhangxinxu from http:/本文地址：http:/ 3 篇文章实际都是为本文做铺垫的，如果以下棋表示，前三篇是普通走棋，本篇是将军！目前市面上有不少表单验证插件，看似强大，实在糟糕！总结下，有以下一些问题：1. 过多干预过多干预包括：改变了表单元素 UI, 为表单元素绑定过多事件等2. 布局等限制布局等限制包括：需要特定结构的布局，需要特定的类名或者 ID3. 学习成本学习成本包括：N 多元作者自定义的属性，或者自定义的特定的数据结构4. 可用性可用性当 JS 出现错误的时候而无法正常
2、运作的时候，验证就是聋子的耳朵摆设，即使在现代浏览器下也是如此。面向未来的表单验证面向未来的表单验证1. 验证驱动验证驱动验证信息 HTML 驱动，例如 HTML5 中required, pattern, multiple等2. 验证形式验证形式非即时响应，submit 验证，如 Chrome 浏览器的处理；或者弱即时响应，如 FireFox 浏览器仅仅红色外发光。3. 验证交互验证交互浮动形式，尖角指示。换言之，所谓面向未来的表单验证，是遵循 W3C HTML5 规范的表单验证，我们可以从目前领先的浏览器中看到大致雏形。而本文所有展示的html5Validate 表单验证插件，就是基于这个未
3、来设计的。二、二、html5Validate 概述概述html5Validate 插件的验证机制、交互形式甚至形式与 Chrome 浏览器HTML5 表单内置验证走的很近。在使用的时候，就是写写原生的HTML5 表单代码。我只想说：走阳光大道和过独木桥的感觉是完全不一样的。举个简单例子，一个邮箱验证，HTML5 代码表示应该是下面这个样子：好巧的是，使用 html5Validate 进行表单验证的时候，也是使用上面这段 HTML 代码！类似下面的绑定：$(“form“).html5Validate();于是，您在提交表单的时候会（在各个浏览器下）看到这样子的提示：跟 Chrome 浏览器下的提
4、示文字近似：html5Validate 支持我所知的 HTML5 验证相关的东西，如type=“email“, type=“number“, type=“tel“, type=“url“, step, min, max, required,pattern, multiple等，并有一些本地化扩展，如增加了type=“zipcode“邮编等，支持type=“hidden“的完整验证（HTML5 中是忽略的），支持多 type 共存，例如type=“email|tel“, 可以让文本框输入邮箱或者手机号码。type=“date“, type=“hour“, type=“password“等因为不同
5、网站规则不一样，因此，没有放在 html5Validate 中，不过，您可以很简单地进行扩展，使您的项目支持之，这个后面会介绍（参见 part 9-4）。为了满足实际开发需求，额外增加了四个自定义属性值：data-key, data-target, data-min, data-max. 具体何用，下面会详细讲解。支持自动的全角转半角。注意：type=“submit“, type=“reset“, type=“file“, type=“image“以及disabled的表单元素没有验证性可言，因此，下面所说的表单元素，并不包括他们。兼容性兼容性html5Validate 通过 jQuery1.
6、4+测试，支持正常 IE6-IE10 浏览器，FireFox, Chrome 等现代浏览器。三、三、demo、使用以及资源下载、使用以及资源下载您可以狠狠地点击这里：html5Validate 表单验证 jQuery 插件测试demo/zxx: 还有一些实际应用的例子将会在本文后半部分展示。使用使用1. 引用 jQuery 框架，示意：2. 引用 html5Validate 插件，示意：3. 绑定调用：$().html5Validate(callback, options);示意，假设测试表单id为html5Form，则有：$(“#html5Form“).html5Validate(funct
7、ion() / 全部验证通过，该干嘛干嘛 );下载下载未压缩版 JS：jquery-html5Validate.js压缩版 JS：jquery-html5Validate-min.jszip 源文件打包下载（含测试 demo）（右键-目标|源文件另存为）：jquery-html5Validate.zip更新时间更新时间：2012-12-17 v1.0 beta2012-12-20 v1.02012-12-21 v1.1四、可选参数以及详解四、可选参数以及详解可选参数见下表：参数名称参数名称默认值默认值简单释义简单释义novalidatetrue布尔型。是否取消现代浏览器的内置验证submitE
8、nabledtrue布尔型。表单中禁用的提交按钮是否使之可用labelDrivetrue布尔型。是否优先使用 label 标签中的文字作为提示关键词1. 参数参数 novalidate既然 html5Validate 插件验证与原生 HTML5 验证公用一套 HTML 代码，显然就存在共存的问题。如果没有设计这个参数novalidate或者novalidate值为false, 则浏览器内置表单验证优先，全部 pass 之后才轮到插件进行验证，也就是说，两者是没有冲突的。其实，原本我是不打算设计这个参数的，因为，我觉得浏览器内置的验证以及交互效果很赞的，但是，IE10 的出现让我速速打消了这个念
9、头，因为，丫丑得我根本无法直视大红的粗框框！novalidate为 HTML5 表单内置的属性（W3C 草案），可以让现代浏览器（IE10+, FireFox, Chrome, Opera 等）默认不对表单做验证（忽略required,pattern等）。html5Validate 插件默认novalidate: true也就是说，其默认对包装器元素添加了novalidate=“novalidate“，以阻止浏览器的默认验证，下图代码为 JS生成之后所截：这就是为什么测试 demo 在 FireFox 等浏览器下不出现内置提示效果的原因。可能您有这样的需求，您希望除了 IE10 以外的现代浏览
10、器都使用浏览器自带的验证规则以及提示效果，怎么办，可以像下面这样？var isIe10 = typeof document.msHidden != “undefiend“; $(“form“).html5Validate($.noop, novalidate: isIe10? false: true );2. 参数参数 submitEnabled这个参数的设计是很有必要的。很多时候，我们的表单是 Ajax 提交的，当页面加载不是很及时的时候如表单元素呈现，但验证脚本未绑定，用户回车一个输入框，悲剧来了，默认表单的submit被触发了，而不是 ajax 提交我不清楚其他团队是怎么处理的，我处理这
11、类问题是表单元素的提交按钮默认disabled，在表单验证脚本绑定 OK 之后，去除disabled属性，使一切正常。submitEnabled参数的作用就是让表单中的禁用的 submit 性质的按钮可用。例如，测试 demo 中，默认按钮是disabled的，这样，就算 JS 因网络等原因被 block 了，用户也无法提交表单，避免造成更加不好的体验。等验证事件初始化完毕，自然，disabled的按钮被enabled了。对于原生submit()的表单或者可以submit()的表单，此参数酱油，您可以无需disabled提交按钮。3. 参数参数 labelDrive顾名思意，label驱动。该
12、参数针对错误提示框中的文字内容。这是与浏览器内置提示文字不一样的地方，优先 label 标签文字提示。什么意思？html5Validate插件有两套文字提示机制。一种是 label 标签驱动，其次是内置固定提示文字，如“请填写此字段”。/zxx: 对于单复选框以及按钮，由于点击它们对应 label 标签会触发选中或者按钮事件，因此，对于这些元素，labelDrive 参数是完全的酱油 提示文字与 label 毫无关系。对于下拉框而言，其在隐藏状态下，提示文字可以从 label 获取；非隐藏状态也是酱油。何为label标签驱动？举个例子：邮箱：上面 HTML 的提示文字就是：如果对应 label
13、 标签中的文字是“邮箱/手机”，则提示文字是：也就是说“label标签驱动”就是把label标签中的文字作为提示关键字，这样子的提示更智能，同时也不会增加额外的 HTML 代码。该文字如何获取如何获取？找到与表单元素 id 对应的 label 元素(for关联)，如果没有则应用内置提示文字规则；获取label标签中的文字，过滤星号(*)，中文冒号(：)和英文冒号(:)，剩下的文字作为提示关键字出现在提示框中，如果输入框内容为空则提示“您尚未输入*”；格式不准确则提示“您输入的*格式不准确”。如果label标签文字与表单元素的placeholder值一样，则此label标签酱油。如果有多个 la
14、bel 元素，符合要求的提示文字会累加。如果最后得到的label标签文字为空，同样应用泛泛的提示文字（如“请填写此字段”或“内容格式不符合要求”）。小技巧小技巧你可以隐藏 label 标签（如 demo 中两个拖选）；或部分隐藏，如demo 中评论部分：内容：提示文字为“您尚未输入评论内容”，而不是“您尚未输入评论”。五、四个自定义属性五、四个自定义属性HTML5 的表单验证 html5Validate 自然支持，但是，仅仅 HTML5 的东西貌似不能完全支持实际的各类需求，因此，html5Validate 中还有4 个自定义属性(就是前面提到的data-key, data-target, d
15、ata-min和data-max)，帮助覆盖 95%+的验证需求。1. 自定义属性自定义属性”data-key”和和”data-target”这两个参数是为模拟表单（或称为“自定义表单”）设计的。何为模拟表单？如自定义的下拉框，或者星星评分选择等 “data-key”作用作用模拟表单往往都是纯鼠标操作的，此时，类似“请填写此字段”或者“您输入的”就显得不准确，不准确的关键就是这里的操作动词“填写”与“输入”。“data-key“的值就表示这个关键动词，如 demo 中的第二个拖选：服务评分于是，提示的时候，就是：注意：隐藏性质表单的“data-key“是可以缺省的，对于一般的隐藏输入框，默认“
16、data-key“值为“输入”；对于隐藏的单复选框或下拉框，默认“data-key“值为“选择”。 “data-target”作用作用从可用性上讲，模拟表单都有一个对应的隐藏不可见的真实表单元素，或visibility:hidden的select下拉框，或hidden类型的input框，或者display:none的radio们。要知道，这些隐藏表单的位置是捕获不到(display:none;)或者位置不准确的。因此，浮动提示框的位置无法确定；就算浮动框位置确定了，指向了一个看不见的东西，用户也会很奇怪的。面对这种情况，“data-target“应运而生。“data-target“可将黄色提示框的目标元素从真实表单元素转移到模拟表单元素（其值正是模拟表单元素的 id(或 className)）。如果“data-target“不存在，或其值对应不到元素，则alert弹出提示，如
