html5表单验证
问题描述
html5中那些原生的验证,如required、pattern等,在验证无效时,那些弹出的提示框是怎么实现的?为什么当因为不同的约束条件不满足而无效时,会弹出不同内容的提示框?是不是结合invalid事件和validity属性实现的?setCustomValidity()方法的工作原理是什么?感觉这块内容越看越乱,还请大牛指教……
问题解答
回答1:去看MDN上的表单验证吧,我觉得说的还是挺清楚的,你可以按照它给的小demo一点点撸,慢慢就明白了。
回答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个数字,在点击提交按钮的时候,就会提出提示
相关文章:
1. docker网络端口映射,没有方便点的操作方法么?2. docker镜像push报错3. java - springboot使用容器加载时,如何预先获取ClassLoader资源?4. javascript - webpack build出错后如何定位文件?5. 怎么在phpstudy中用phpexcel上传数据到MYSQL?6. vue.js - 为什么我的vue项目上传到github不能预览?7. css3 邊框漸層 及 ios背景模糊?8. html5 - 想要写一个H5页面,就微信打开来那种,然后几个输入框,把数据保存在我后台(java)的数据库里,实现思路是怎样的?9. java - AtomicInteger等原子类,是不是不用volatile修饰,自带volatile属性?10. android - 百度地图加载大量marker点有没有比较好的解决方案