html5表单验证

问题描述

html5中那些原生的验证，如required、pattern等，在验证无效时，那些弹出的提示框是怎么实现的？为什么当因为不同的约束条件不满足而无效时，会弹出不同内容的提示框？是不是结合invalid事件和validity属性实现的？setCustomValidity()方法的工作原理是什么？感觉这块内容越看越乱，还请大牛指教……

问题解答

去看MDN上的表单验证吧，我觉得说的还是挺清楚的，你可以按照它给的小demo一点点撸，慢慢就明白了。

required:空白验证，比如说：

<form> <input type='text' required oninvalid='setCustomValidity(’此处不能为空！’)' oninput=(’setCustomValidity()’)> <input type='submit' value='提交'></form>

如果input[type=text]的value为空，就会弹出提示框，并且阻止表单提交；pattern:匹配正则表达式，比如说：

<form> <input type='text' pattern='[0-9]{3}' oninvalid='setCustomValidity(’请输入3个数字！’)' oninput=(’setCustomValidity()’)> <input type='submit' value='提交'></form>

如若input[type=text]的value不为3个数字，在点击提交按钮的时候，就会提出提示