1.输入格式不对，提交按钮不让你走
当你填网页表格时，假如你不小心输错了邮箱地址这类不对劲儿的地方，点下提交后，浏览器会立马跟你说：“这儿错！”然后拦下你不让走，给你在页面上显个警告提醒下哪儿出错了。这事儿当你想把不是邮箱格式的字符塞进去时最容易碰到，浏览器就像是个严肃的老师，绝不让一点儿差错蒙混过关。
2.电话号码和电子邮件，不一样哦
或许你会觉得，既然输错邮箱地址可以纠正，那手机号输错应该也能提醒？可惜，不是这样。这个<inputtype=”tel”>其实就是让你知道这儿要填电话号而已，在电脑上面只起装饰作用。直到用手机才能看到数字键盘，方便填写。不过，它可不会帮你确认输入的到底对不对，所以在电脑上输一堆字母的话，浏览器可不理你。
3.自定义验证，你的规矩你来定
如果你想要浏览器帮忙检查输进去的东西对不对，就用pattern属性。通过设定它，你能给出一个像搜索引擎蜘蛛一样的正则表达式。如果用户的填写不符合此规则，浏览器就不会让他们通过，并且还会弹出一个提醒，让他们知道应该怎么做。
4.空着不填，浏览器也懒得理你
好玩？就算你什么都没填，浏览器也不会有啥反应！因为默认情况下这些字段可以空着。所以当你遇到空白的输入框时，浏览器基本上都会放行，不需要做啥验证。
5.错误信息，藏在哪里的秘密
var input = document.getElementById('input')
input.validationMessage // =>'请填写此字段'
有些浏览器的不正确提示，其实就在某某属性（validationMessage）里面。而且这个属性是某些现代浏览器里只能被读取的，也就是没法乱修改。当我们提交表单，如果遇到错误，浏览器就是从这个属性里找出来误操作的信息，然后给你看咯。
6.必填字段，不能空着
input.setCustomValidity('这个字段必须填上哦');
// 下面这种做法适用于不支持setCustomValidity的浏览器，基本现代浏览器都不支持这样做
input.validationMessage = '这个字段必须填上哦'
设上required属性就说明了这个字段得填。哪天有人想空着必需填字段提交时，他们的浏览器肯定会弹出个提示瞧你说”请别忘了填啊”或者类似的话。虽可变通下这提示内容，但不能把它彻底消掉，毕竟那可是浏览器的硬性规定。
7.验证通过与否，一目了然
浏览器的表单验证就是看validatorsMessage属性值来判断字段算过没过关。属性为空？那就大功告成！有内容的话，浏览器就会把这信息当成‘不对劲’的错误提示告诉你。
8.即时反馈，真的需要吗？
是不是觉得每打一个字就能看到反馈信息就好了？其实浏览器只有在按了提交按钮才会去检查ValidationMessage这段文本告诉你有没有错。所以，除非真提交，不然你还不知道输对没！
input.addEventListener('input', function () {
if(this.value.length > 3){ // 判断条件完全自定义
input.setCustomValidity('格式不正确');
}else {
input.setCustomValidity('')
}
});
9.输入即检查，为了更好的用户体验
浏览器一般的就只是在提交的时候才校验，不过，咱们是开发者可以做个小手脚，就是把键盘事件给绑定起来，这样，每次输入都会检验！也就是说，只要发现不对头，它马上就变红或者其它醒目的颜色提醒你要改正了，多方便！
10.总结：表单验证，不只是技术活
提交表单可不能马虎，毕竟这不仅关乎技术，更影响我们的使用感受！别让糟糕的表单验证让人头大，而是要给人家提供便捷舒心的体验！因此，下次设计表单时，千万别忘了这些小细节，期待您的用户幸福满满地使用起来哟~
input:required {
background-color: #FFE14D;
}
/*这个伪类通过validationMessage属性进行判断*/
input:invalid {
border: 2px solid red;
}
评论0