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

html5-logo

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

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

猛戳这里查看demo

1. 电子邮件输入框

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

<form method="get">
    <label for="email">电子邮件:</label>
    <input id="email" name="email" type="email">
    <button> 提交 </button>
</form>
html5-form-email

html5-form-url

2. URL 输入框

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

<form method="get">
    <label for="url">网址:</label>
    <input id="url" name="url" type="url">
    <button> 提交 </button>
</form>

3. 数字输入框

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

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

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

<form method="get">
    <label for="number">年龄:</label>
    <input id="number" name="number" type="number" min="18" max="99">
    <button> 提交 </button>
</form>
html5-form-tel

html5-form-number

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

4. 必填属性

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

<form method="post">
    <label for="username">用户名: </label>
    <input id="username" name="username" type="text" placeholder="Username" required="required">
    <button> 下一步 </button>
</form>

5. 正则表达式

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

<form method="post">
    <label for="username">用户名: </label>  
    <input type="text" name="username" id="username" placeholder="4 <> 10" pattern="[A-Za-z]{4,10}" autofocus="autofocus" required="required">
    <button type="submit"> 下一步 </button>
</form>

6. 等值输入框

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

<form method="get">
    <label for="password1">输入密码:</label>
    <input id="password1" name="password1" type="password">
    <label for="password2">再次输入密码:</label>
    <input id="password2" name="password2" type="password" data-equals="password1">
    <button> 提交 </button>
</form>
<script>
$.tools.validator.fn("[data-equals]", "Different value and $ 1", function(input) {
   var name = input.attr("data-equals"),
      field = this.getInputs().filter("[name=" + name + "]"); 
   return input.val() == field.val() ? true : [name]; 
});
//$.tools.validator.fn()的参数中‘$1’代表 data-equals 的值
</script>

总结

HTML5 特性支持

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

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

HTML5 的 range 和 date 类型同样也可以获得 jQuery Tools 插件的跨浏览器支持,添加 rangeinputdateinput 插件即可。同时我们还可以使用 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不同的地方在于表单仍然会提交该字段,也会进行提交前的验证。

自定义错误提示消息

<input type="number" min="10" data-message="请输入大于10的数值!" />

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

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