jQueryhtml5Validate基于HTML5表单验证插件

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