HTML5利用约束验证API来检查表单的输入数据

HTML5利用约束验证API来检查表单的输入数据

HTML5对于表单有着极大程度的优化，无论是语义，小部件，还是数据格式的验证。我猜你肯定会以浏览器兼容作为借口不愿意使用这些“新功能”，但这绝不应该成为使你停滞不前的原因，况且还有像Modernizr和ployfill这样的工具库帮助你在不支持HTML5的浏览器上进行回退处理。当你真正试着使用这些表单的新功能时，我保证你会爱上它。如果说唯一的缺陷，就是提示框的样式是浏览器默认的，你无法改变，好吧，如果你相信浏览器厂商的设计师的审美水平的话（我相信他们的设计水平比绝大部分普通人要好，如果不考虑风格兼容的话），抓紧学就对了！

这篇文章不会去讨论简单的input type，本文想把重点放在HTML5表单验证机制上。主要介绍是HTML5是如何利用约束验证API来检查表单的输入数据的，当然，本文会涉及到很多其它的知识。

原生验证

input type

HTML5中为数据格式验证提供了很多原生的支持，例如：

<input type='email'/>

当点击提交按钮时，如果你输入的格式不符合email，则会导致无法提交，浏览器会提示你错误信息。

比如在chrome下：

注意：

1. 仅当你提交的时候会触发浏览器的验证
2. 不同浏览器提示信息的行为样式不一样
3. 当有多个input不符合要求时，只会提示一个错误，一般会提示表单中相对较前的Input的

不要理所应当的认为当input的type等于tel的时候，如果你输入的不是电话号码格式，在提交时也会被浏览器的阻挡并提示错误信息，type=’tel’在PC端只起到语义的作用，在移动端可以使产生的键盘为纯数字键盘，并不能起到数据验证的作用。

pattern

你可