HTML5 表单新属性 pattern 的使用技术
maybe yes 发表于2015-05-13 23:01
原文链接 : http://blog.lmlphp.com/archives/117/The_use_of_HTML5_form_new_attribute_pattern 来自 : LMLPHP后院
HTML5 的表单属性增加了很多功能，如 placeholder，pattern，multiple，autocomplete，autofocus，list，novalidate， required 等。这些新属性让网站的开发更加方面和简单。但是现实总是残酷的，若是要开发出真正用户体验非常好的网站，这些自带功能往往都是排不上用场的。
前段时间在一个网站上提交表单时 input 输入框提示 “请与所请求的格式保持一致。”，这样的提示让我不知怎么回事。于是审查元素查看到输入框的属性中含有 pattern，由于是一个邮箱字段，pattern 写的过于严格，导致不能通过校验。这样的提示对于一般的用户来说，是不会明白怎么回事的。
于是写了个小页面进行测试，发现不同的浏览器的提示内容不一样，也有部分支持 HTML5 的浏览器不支持 pattern 属性的，比如 Safari 浏览器。测试发现 Chrome 和 Firefox 都支持 pattern 属性，Chrome 浏览器的提示内容是：“请与所请求的格式保持一致。”， Firefox 的提示内容是：“请匹配要求的格式！”。
使用 pattern 属性的同时，最好是配合 title 属性一起使用，并在 title 属性中注明要求的格式，提示的时候 title 属性中的内容会出现在下方，如果不在 title 属性中注明，用户根本不知道要求的格式是什么，用户体验会非常的不好。如下代码示例：
<form>
<input type="text" placeholder="数字" pattern="\d+" id="数字" title="必须数字哦！">
<label for="数字">数字</label>
<input type="submit" value="submit">
</form>
附上 Chrome 和 Firefox 运行截图：
转载于:https://my.oschina.net/hosser/blog/672733