|
by zhangxinxu from http://www. 一、前言前3篇文章实际都是为本文做铺垫的，如果以下棋表示，前三篇是普通走棋，本篇是将军！ 目前市面上有不少表单验证插件，看似强大，实在糟糕！ 总结下，有以下一些问题：
当JS出现错误的时候而无法正常运作的时候，验证就是聋子的耳朵——摆设，即使在现代浏览器下也是如此。 面向未来的表单验证
换言之，所谓面向未来的表单验证，是遵循W3C HTML5规范的表单验证，我们可以从目前领先的浏览器中看到大致雏形。而本文所有展示的html5Validate表单验证插件，就是基于这个未来设计的。 二、html5Validate概述html5Validate插件的验证机制、交互形式甚至形式与Chrome浏览器HTML5表单内置验证走的很近。在使用的时候，就是写写原生的HTML5表单代码。我只想说：走阳光大道和过独木桥的感觉是完全不一样的。 举个简单例子，一个邮箱验证，HTML5代码表示应该是下面这个样子： <input type="email" required> 好巧的是，使用html5Validate进行表单验证的时候，也是使用上面这段HTML代码！ 类似下面的绑定： $("form").html5Validate();于是，您在提交表单的时候会（在各个浏览器下）看到这样子的提示： 跟Chrome浏览器下的提示文字近似： html5Validate支持我所知的HTML5验证相关的东西，如
为了满足实际开发需求，额外增加了四个自定义属性值： 支持自动的全角转半角。
兼容性 三、demo、使用以及资源下载您可以狠狠地点击这里：html5Validate表单验证jQuery插件测试demo //zxx: 还有一些实际应用的例子将会在本文后半部分展示。 使用
下载 zip源文件打包下载（含测试demo）（右键-[目标|源文件]另存为）：jquery-html5Validate.zip 更新时间： 四、可选参数以及详解可选参数见下表：
1. 参数novalidate 如果没有设计这个参数
这就是为什么测试demo在FireFox等浏览器下不出现内置提示效果的原因。 可能您有这样的需求，您希望除了IE10以外的现代浏览器都使用浏览器自带的验证规则以及提示效果，怎么办，可以像下面这样？ var isIe10 = typeof document.msHidden !== "undefiend";
$("form").html5Validate($.noop, {
novalidate: isIe10? false: true
});2. 参数submitEnabled 很多时候，我们的表单是Ajax提交的，当页面加载不是很及时的时候——如表单元素呈现，但验证脚本未绑定——，用户回车一个输入框，悲剧来了，默认表单的 我不清楚其他团队是怎么处理的，我处理这类问题是表单元素的提交按钮默认
例如，测试demo中，默认按钮是 等验证事件初始化完毕，自然， 对于原生 3. 参数labelDrive 这是与浏览器内置提示文字不一样的地方，优先label标签文字提示。什么意思？
//zxx: 对于单复选框以及按钮，由于点击它们对应label标签会触发选中或者按钮事件，因此，对于这些元素，labelDrive参数是完全的酱油 – 提示文字与label毫无关系。对于下拉框而言，其在隐藏状态下，提示文字可以从label获取；非隐藏状态也是酱油。 何为 <label for="email">邮箱：</label><input type="email" id="email" required> 上面HTML的提示文字就是： 如果对应label标签中的文字是“邮箱/手机”，则提示文字是： 也就是说“ 该文字如何获取？ 小技巧 <label for="comment">内容：</label><textarea id="comment" rows="5" required data-min="5" data-max="100"> 提示文字为“您尚未输入评论内容”，而不是“您尚未输入评论”。 4. 参数validate 新增于2013-06-19 在我的实际项目中，MooTools版的 插件内部是如此运作的，先执行插件内置的验证，然后，再执行 言语苍白，demo明了。您可以狠狠地点击这里：html5Validate新增validate参数demo demo中有两个额外的验证：一是前后密码需要一致；二是多选项至少选择3个。大致截图如下： 然后，相关JS如下： $("form").html5Validate(function() {
alert("验证全部通过！");
this.submit();
}, {
validate: function() {
// 下面这些就是额外的一些特殊验证
if ($("#pwdCheck").val() !== $("#pwd").val()) {
$("#pwdCheck").testRemind("前后密码不一致");
return false;
} else if ($("input[type='checkbox']:checked").length < 3) {
$("#checkBox").testRemind("至少选择3项");
return false;
}
return true;
}
});注意需要有Boolean类型返回值，验证出错返回
五、四个自定义属性HTML5的表单验证html5Validate自然支持，但是，仅仅HTML5的东西貌似不能完全支持实际的各类需求，因此，html5Validate中还有4个自定义属性(就是前面提到的 1. 自定义属性”data-key”和”data-target” 何为模拟表单？如自定义的下拉框，或者星星评分选择等…… ① “data-key”作用 <label for="serverScore" class="dn">服务评分</label>
<input type="hidden" id="serverScore" required data-key="拖选" />于是，提示的时候，就是： 注意：隐藏性质表单的 ① “data-target”作用 要知道，这些隐藏表单的位置是捕获不到(
如果 HTML代码如下： <span id="hiddenRemind" class="bar_bg"><i class="bar_btn" data-rel="envirScore"></i></span> <label for="envirScore" class="dn">环境评分</label> <input type="range" id="envirScore" class="dn" required data-key="拖选" data-target="hiddenRemind" /> 2. 自定义属性”data-max”和”data-min” <textarea id="comment" rows="5" data-max="100" data-min="5" required></textarea> 表示，评论内容需要5-100个字符。无论字符不足或者是超出，都会出现提示，其中，当内容超出的时候，html5Validate会自动帮你选中溢出部分的文字，例如下面截图： 六、一些验证类型的说明1. type=number, 整数与小数 具体验证规则参见之前下的一步棋：HTML5 number类型文本框step属性的验证机制 数值文本框的UI 因此，实际上，不少团队的数值类型框还是老旧的 很简单，在类型后面加个空格，例如，不是设置 html5Validate会自动过滤最后的空格，因此，相关的验证没有任何影响。 数值文本框与multiple 2. 不得不提的type=range 如果浏览器支持 因此，个人看来， 3. type=radio以及 type=checkbox的验证规则 对于同一组单选框（name值一致），只要有一个单选框设置 对于复选框，哪个必选，就哪个需要设置 七、内置插件testRemind介绍jquery-html5Validate.js中还内置另外一个插件 – testRemind. 就是出现那个黄色提示框框的插件。 用法如下： $().testRemind(content, options); 其中， 可选参数
参数含义 ② 参数align 在html5Validate中，一般的表单元素尖角都是在中间的，但是，单选框和复选框尖角实在左侧，如下图所示，这个设置目前暂不可变： ③ 参数css 例如，通过如下的设置，我们可以让提示框框的效果长得跟Chrome浏览器近似： $("input").testRemind("无论输入什么，都不合格！", {
size: 10,
css: {
padding: "8px 10px",
borderColor: "#aaa",
borderRadius: 8,
boxShadow: "2px 2px 4px rgba(0,0,0,.2)",
background: "#fff url(chrome-remind.png) no-repeat 10px 12px",
backgroundColor: "#fff",
fontSize: 16,
textIndent: 20
}
}).get(0).focus();
于是，有类似下面效果（截自FireFox 17）： 您可以狠狠地点击这里：testRemind Chrome UI测试demo 几乎酱油的可选参数 一来自己不希望html5Validate与testRemind方法有过多的耦合，因为这会让我觉得复杂，而产生不安；其次，对于一个项目而言，提示框框效果应该是整站统一，样式设置的限制未尝不是一件好事。 不过，此处小标题是“几乎酱油”，言外之意就是您还是可以通过一定的外部设置，改变提示框框的样式的。本插件JS中暴露了一个名为 举个板栗，如下代码： $.testRemind.css = {
borderColor: "#a0b3d6",
backgroundColor: "#f0f3f9"
};
$("#testForm").html5Validate();则，提示框框就会变成下面这幅屌模样： 总结为：testRemind方法的CSS有限可选参数 注意：提示框出现后，点击提示框以外的页面任意位置，或在表单元素foxus状态下触发键盘，或改变浏览器的尺寸，提示框都会 $.testRemind.display //zxx: 下面为广告~~注意不要勿点~~嘻嘻~~ 八、高阶使用
html5Validate中有个名为$.html5Validate的对象，其中有一些方法，如验证元素是否为空( $.html5Validate.isAllpass(elements, options); 顾名思意：HTML5验证 – 是否全部通过！ 1. 参数elements $.html5Validate.isAllpass(document.getElementsByTagName("form")[0]);
$.html5Validate.isAllpass($("form"));
$.html5Validate.isAllpass($("input, textarea, select"));2. 可选参数options
订阅优惠信息 <input type="email " class="email" placeholder="输入邮箱，如a@b.com" required /> <a href="javascript:" class="button">订阅</a> 然后，类似下面的验证处理： $(".button").bind("click", function() {
var email = $(".email");
if ($.html5Validate.isAllpass(email)) {
// 邮箱验证通过，该干嘛干嘛~~
}
});您可以狠狠地点击这里：$.html5Validate.isAllpass简单应用demo
九、其他可用的全局方法、对象及扩展1. 全半角转换DBC2SBC方法 DBC2SBC("１３２０８０３３６２１"); // 结果是"13208033621"2. 检测元素是否可见 这里的不可见指的是不能被focus的隐藏，包括 3. Boolean型属性检测 所谓Boolean型属性指的是HTML5中 4. 全局对象OBJREG及扩展 此对象就是根据表单 OBJREG.DATE = "^[1|2]\\d{3}\\-[0|1]?\\d\\-[0-3]?\\d$"于是乎，当提交表单含 您还可以自定义HTML5规范以外的 类似的，您网站的昵称等也可以自定义，例如 昵称
<input type="nickname" class="nickname" required data-min="6" data-max="20" /> 6-20个单词字符
<a href="javascript:" class="button">检测</a>JS部分的设置： OBJREG.NICKNAME = "^\\w+$";
OBJREG["prompt"].nickname = "只能是字母数字以及下划线";
$(".button").bind("click", function() {
var nickname = $(".nickname");
if ($.html5Validate.isAllpass(nickname)) {
alert("验证通过！");
}
});于是乎，当含非单词字符的时候，就会有下图所示提示： 您可以狠狠地点击这里：html5Validate全局对象OBJREG扩展demo OBJREG对象与pattern属性之间关系 举个例子，有些情况下，数值输入框可以允许输入中文单位，您就可以这样处理： <input type="number" pattern="^\d+" />这样子，插件会使用 注意： 十、各类实际应用1. 注册及其验证 这个demo在demo里面算是蛮仿真的，验证码以及验证什么的都是有处理的。 值得说明的 其中，使用了前面提到的 ② 确认密码框禁用与不禁用的控制部分有这么一行代码： if ($.html5Validate.isEmpty(this)) {
③ html5Validate插件并没有密码或手机号码前后一致验证的方法，如果在实际使用中遇到这类需求，您可以在html5Validate验证回调中进行额外验证。 2. 发表点评及验证
这个demo的重点就在星星的处理上。 星星的本质是单选框组，从差到好共5个单选，默认是显示的，当JS执行到此的时候，单选框组隐藏，默认隐藏的星星们显示；这个交互就是我上面提到的模拟表单！ 单选框组的验证只有”是否必选”这1条，如果必选，则仅仅1个单选 该单选框HTML代码如下： <input type="radio" id="radioImp1" name="impress" value="1" required data-target="starScore"><label for="radioImp1">差</label> 然后通过： $().css("visibility", "hidden");将其隐藏不可见，打通任督二脉，以便 点击星星的操作实际是让对应单选框选中，从这点来看，我们还可以把星星使用 其他都是些常规验证，没有什么好说的。 十一、结语以及其他杂碎IE10向下兼容模式的IE6-IE9, 其HTML5表单属性又有严重的冲突bug（外表看不出来）. 因此，本插件在这些浏览器下有部分的不支持，主要是IE10支持的HTML5 我个人的建议是忽略之，理由略……如果您实在想支持， 本插件验证机制多遵循Chrome浏览器，因此，其表单验证都是一个一个提示的，大范围标红这种需求本插件满足不了。 补充：关于即时验证 虽然插件支持即时验证无望，但是，插件之外是可以简单几行代码支持的，如下： $.fn.immediValidate = function(passCallback) {
return $(this).find(":input").each(function() {
if (/^submit|image|reset|file|radio|checkbox|button$/.test(this.type)) return;
var self = this;
$(this).bind("blur", function() {
setTimeout(function() {
if ($.testRemind.display == false && $.html5Validate.isAllpass($(self)) ) {
$.isFunction(passCallback) && passCallback.call(self);
}
}, 100);
});
});
};于是，我们只要这样绑定JS就可以了： $("form").html5Validate().immediValidate();本地已验证。 虽然html5Validate插件的完成细嚼慢咽，多番积累，但是，不可能面面俱到，因此，如果承蒙您使用了，并且发现了相关问题，欢迎提出来。我会尽快修改并发布的。因为github自己还玩得不熟，版本啊更新什么的都是比较传统的手动方式，所以可能会有JS是最新的，但是文中的更新日期还是落后的情况，希望见谅。 也欢迎提出其他宝贵意见，不甚感谢！ 原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.] （本篇完） 如果您觉得本文的内容对您的学习有所帮助： 相关文章
标签： HTML5, html5Validate, jQuery, 插件, 表单, 验证
|
|
|
