表单验证是广大前端非常头疼的一项事务，特别是在面对复杂表单的情况下，例如某些输入框仅接受数字输入，某些字段是必填，有些项又必须满足一定输入规则……为了提供更好的用户体验，这些繁琐的需求不得不去花大量时间和代码去满足。在新的 HTML5 标准中，增加了十几个表单输入类型和特性，例如 autofocus 自动焦点，以及之前介绍过的 Placeholder 占位符。这些贴心的特性支持大大解放了前端开发人员，我们仅需使用新的标签元素或属性，就可以完成过去需要大量 javascript 代码才能完成的功能。

html5-logo

问题是，在 HTML5 尚未普及的今天，特别是国内复杂的浏览器市场环境下，仅使用 HTML5 来解决表单验证这些问题实在是力不从心。如何让页面更有语义，让我们的代码更加优雅简洁，这是个问题。

于是本文主角闪亮登场了！撒花～～它就是大名鼎鼎的 jQuery Tools 。它奉行极简主义风格，使用标准 HTML5 语法，不需要写额外的 js 代码，在大部分浏览器都支持 HTML5 之时，直接删除插件即可，非常方便。

猛戳这里查看demo

1. 电子邮件输入框

HTML5 中对 input 标签新增了 email 类型，可以检测输入的内容是否符合电子邮件的书写格式。那些不支持新类型的旧版浏览器也只是把它们看作一个文本框，用户不会注意到这个变化。智能手机用户应该知道在那些邮件地址的输入框，会出现一个更方便的键盘输入 @ 。如果你用过 iPhone 或者 android， 你懂的。
html5-form-email

html5-form-url

2. URL 输入框

如果需要输入网址，例如 https://ss.lovelucy.info 这样的格式，现在也能进行验证。而在 iPhone 上网址类型输入框会出现一个可变化的键盘，用户可以很方便输入斜线和.com，如上右图所示。（经测试发现 Android 没有这个变化，差距啊。。。）

3. 数字输入框

在过去要得到匹配的数字，你不得不使用 jQuery 来帮助验证输入。HTML5 增加了数字类型，还增加了一些额外的属性：

  • Min：指定输入框可接受的最小输入数字。
  • Max：你猜对了，就是允许输入的最大数字。
  • Step:属性输入域合法的间隔 ，默认是1。

同样的，在智能手机上，我们会得到一个仅有数字的键盘，十分方便。手机上出现数字键盘的，应该是 type=”tel” 类型，如下图（截图自Android4.0）。目前还没有浏览器支持对 tel 类型的输入验证，本插件也没有支持。
html5-form-tel

html5-form-number

HTML5 还有一个新类型叫 range，输入框变成一个滑动条。不需要别的插件，你的表单就可以使用可视化的滑动条了，这很酷吧。用户是很懒的，用鼠标拖动当然比费力敲键盘方便啦。它的用法和 number 类型一样，只是把类型设置 type=”number” 改成 type=”range” 即可。

4. 必填属性

输入框的内容是必须填写的，以前是用 Javascript 来检查。在 HTML5 中，新增了一个属性：required，简直太方便了。

5. 正则表达式

在 HTML5 中，我们甚至可以直接使用正则表达式。

6. 等值输入框

data-equals 判断两个输入框值是否一致，常用于密码框的 2 次输入。这不是 HTML5 标准，但可以被插件支持。

总结

HTML5 特性支持

除了 “text”， “checkbox” 和 “radio” 之外，插件支持的新类型：

类型 描述
email 仅接受输入一个有效的 Email 地址格式
number 接受整数或浮点小数类型输入
url 仅接受输入一个有效的 URL 地址格式

HTML5 的 range 和 date 类型同样也可以获得 jQuery Tools 插件的跨浏览器支持，添加 rangeinput 和 dateinput 插件即可。同时我们还可以使用 jQuery 选择器 :email, :number 和 :url，非常方便。

HTML5 属性支持：

属性 数据类型 描述
max 数字 数字类型可输入的最大值。对number, text, date 和 range 类型都有效。
min 数字 数字类型可输入的最小值。对number, text, date 和 range 类型都有效。
pattern 正则表达式 使用正则表达式限定可输入的格式。例如pattern=”[a-z]” 即限定只能输入小写字母 a 到 z。最好使用 title 属性对规则进行文字描述。
requried “required” 规定该表单字段必填。用法required=”required”，仅仅加 required 或 required=”true” 均无效。该属性对 checkbox 和 select 类型也起作用。

下面一些旧的 HTML4 属性也被插件支持，但提供增强的、更友好的用户体验：

属性 类型 描述
disabled 禁用该输入字段。输入框无法进行输入，同时也不会进行表单验证。在浏览器中禁用的字段会显示灰色。
maxlength 数字 限制输入的长度，强制用户不能输入太多字符。这个特性继承浏览器行为，插件不会做更多事情。
readonly 让输入字段无法编辑。与disabled不同的地方在于表单仍然会提交该字段，也会进行提交前的验证。

自定义错误提示消息

更多的插件配置参数，自定义验证类型，多国语言，Ajax 服务器端验证等等，请参阅官方文档。

Update: jQuery Validation是另一个表单验证的插件，它由 jQuery 官方团队的成员 Jörn Zaefferer 开发并维护，能让我们向输入框添加预设的 class 来完成验证，有空也可以关注一下。