登录

html5表单验证

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

# HTML
天蓬老师 天蓬老师 2458 天前 952 次浏览

全部回复(2) 我要回复

  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-07-06 10:37:42

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

    回复
    0
  • 伊谢尔伦

    伊谢尔伦2017-07-06 10:37:42

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

    回复
    0
  • 取消 回复 发送