HTML5对于表单有着极大程度的优化,无论是语义,小部件,还是数据格式的验证。我猜你肯定会以浏览器兼容作为借口不愿意使用这些“新功能”,但这绝不应该成为使你停滞不前的原因,况且还有像Modernizr和ployfill这样的工具库帮助你在不支持Html5的浏览器上进行回退处理。当你真正试着使用这些表单的新功能时,我保证你会爱上它。如果说唯一的缺陷,就是提示框的样式是浏览器默认的,你无法改变,好吧,如果你相信浏览器厂商的设计师的审美水平的话(我相信他们的设计水平比绝大部分普通人要好,如果不考虑风格兼容的话),抓紧学就对了!
原生验证
input type
HTML5中为数据格式验证提供了很多原生的支持,例如:
<input type='email'/>
当点击提交按钮时,如果你输入的格式不符合email,则会导致无法提交,浏览器会提示你错误信息。
比如在chrome下:
注意:
1、仅当你提交的时候会触发浏览器的验证
2、不同浏览器提示信息的行为样式不一样
3、当有多个input不符合要求时,只会提示一个错误,一般会提示表单中相对较前的Input的
不要理所应当的认为当input的type等于tel的时候,如果你输入的不是电话号码格式,在提交时也会被浏览器的阻挡并提示错误信息,type=’tel’在PC端只起到语义的作用,在移动端可以使产生的键盘为纯数字键盘,并不能起到数据验证的作用。
pattern
你可以使用pattern属性来对浏览器不提供原生验证的数据格式设置自定义格式验证。pattern属性的值是一个正则表达式(字符串):
<input type='tel' pattern='[0-9]{11}' title='请输入11位电话号码'>
点击提交时,如果你输入的数据不符合pattern里面正则的格式,那么浏览器会阻止表单提交,并提示:‘请与所请求的格式保持一致’+ title里的内容(小字)。但注意,当你的文本框中内容为空的时候,浏览器不会对其进行检查,会直接提交表单(因为浏览器认为这个框框不是必填项)。如果你想要这个框框必须有内容,请加上required属性。
通过HTML原生的验证系统,基本就能满足我们对表单提交的限定。但HTML5提供了更高级的功能来方便我们开发和提升用户体验。
约束验证API
默认提示信息
像‘请与所请求的格式保持一致’这样的浏览器提示信息字串藏在input DOM对象的validationMessage属性里,这个属性在大多数现代的浏览器中是只读的,即不可修改,比如下面的代码:
<input type="text" required id='input'/>
当提交时,如果Input内容为空,那么浏览器会提示‘请填写此字段’,我们可以在控制台把这句话打印出来:
var input = document.getElementById('input') input.validationMessage // =>'请填写此字段'
如果想修改其中的内容,可以调用setCustomValidity接口改变validationMessage的值
input.setCustomValidity('这个字段必须填上哦'); // 下面这种做法适用于不支持setCustomValidity的浏览器,基本现代浏览器都不支持这样做 input.validationMessage = '这个字段必须填上哦'
注意,像required这样的HTML原生验证,虽然能改变其中信息,但无法把信息置为空字串,原因下面会讲到。
原理
HTML表单验证系统通过validationMessage属性检测该文本框的数据是否通过验证,如果其值为空字串,则表示通过了验证,否则,表示未通过,浏览器会把其值作为错误信息提示给用户。所以在原生验证时,用户无法把validationMessage的值设置为空字符串。
约束验证API的简单实例
约束验证API是在原生方法之上更灵活的表达方式,你可以自己设置数据是否通过,而不借助于正则表达式。原理很简单,通过if判断,如果数据格式使你满意,那么你就调用setCustomValidity使validationMessage的值为空,否则,你就调用setCustomValidity传入错误信息:
input.addEventListener('input', function () { if(this.value.length > 3){ // 判断条件完全自定义 input.setCustomValidity('格式不正确'); }else { input.setCustomValidity('') } });