html5表单验证

Question

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

Answer 1

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

Answer 2

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个数字，在点击提交按钮的时候，就会提出提示