H5表单验证失败该如何提醒-
我们晓得，前端的童鞋在写页面时, 都不成以免的总会踩到 表单验证这个坑.这时候, 我们就要跪了, 由于要写一堆 js 来检查. 但是自从 H5 涌现后, 许多常见的 表达验证 , 它都已经帮我们实现了, 让我们减轻了许多承担, 就宛如下面的:
邮箱地址验证:
Test
邮箱验证是 H5 本身支撑的, 但是我们要验证的场景和状况是五花八门的, 那该怎么办? 用回 Js 吗? 很显明没这么蛋疼, 由于 H5 供给了 pattern 属性, 让我们自立门户! 我们可以在 pattern 指定正则表达式, 只有正则写的好, 验证就没懊恼!
正则限制11位数字:
Test
题目
大家可以尝试下, 在输入非11位的数字, 都会报错, 这就是 pattern 的功绩. 但是不晓得大家发明了一个蛋疼的现象没? 就是要是咱们运用 pattern 的方式去验证表单, 在验证失败时, 它的提醒都是 请与所要求的格局维持一致 , 我的天, 我们的会员怎么晓得所要求的格局有哪些鬼, 总不克不及让他们去看源码吧, 要真这样, 我们连页面都不消写了, 直接让他们把钱给我们得了, 开个玩笑~
解决方案
有题目, 咱们就得解决, 在面向谷歌编程好久, 终于觅得一良方:
oninvalid：提交的input元素的值为无效值时（这里是正则验证失败），触发
oninvalid事件。oninvalid属于Form 事件。
setCustomValidity()：这个是HTML5内置的JS办法，用来自定义提醒信息
本来可以通过 oninvalid 和 setCustomValidity 来自定义提醒, 那这就好办了, 修改源代码如下:
Test
终于不是阿谁蛋疼的"格局"了, 此刻表单验证提醒已经很明白的告诉我们, 这里应当输入的有哪些样的数据, 这样会员就能更好的修改本人的输入了!
信赖看了这些案例你已经把握了办法，更多出色请关注 百分百源码网 其它相干文章！
相干浏览：
如何用Canvas紧缩图片
h5如何叫醒app
H5中视频与音频标签和进度条怎样运用
以上就是H5表单验证失败该如何提醒的细致内容，更多请关注 百分百源码网 其它相干文章！
