这篇文章主要介绍了H5表单验证失败该如何提示,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
我们知道,前端的童鞋在写页面时,都不可避免的总会踩到表单验证这个坑。这时候,我们就要跪了,因为要写一堆js来检查。但是自从H5出现后,很多常见的表达验证,它都已经帮我们实现了,让我们减轻了很多负担,就好像下面的:
邮箱地址验证:
& lt; !DOCTYPE html> & lt; html lang=癳n"祝辞 & lt; head> & lt;元charset=癠TF-8"祝辞 & lt; title> Test & lt;/head> & lt; body> action=& lt;形式““比; & lt;标签比; 邮箱:& lt;输入类型=癳mail"比; & lt;/label> & lt;输入类型=皊ubmit"祝辞 & lt;/form> & lt;/body> & lt;/html>
邮箱验证是H5自身支持的,但是我们要验证的场景和情况是多种多样的,那该怎么办?用回Js吗?很明显没这么蛋疼,因为H5提供了模式属性,让我们自食其力!我们可以在模式指定正则表达式,只要正则写的好,验证就没烦恼!
正则限定11位数字:
& lt; !DOCTYPE html> & lt; html lang=癳n"祝辞 & lt; head> & lt;元charset=癠TF-8"祝辞 & lt; title> Test & lt;/head> & lt; body> action=& lt;形式““比; & lt;标签比; 数字:& lt;输入类型=皌ext"模式=癪 \ d{11}“美元比; & lt;/label> & lt;输入类型=皊ubmit"祝辞 & lt;/form> & lt;/body> & lt;/html>
问题
大家可以尝试下,在输入非11位的数字,都会报的错,这就是模式的功劳。但是不知道大家发现了一个蛋疼的现象没?就是如果咱们使用模式的方式去验证表单,在验证失败时,它的提示都是请与所请求的格式保持一致,我的天,我们的用户怎么知道所请求的格式是什么鬼,总不能让他们去看源码吧,要真这样,我们连页面都不用写了,直接让他们把钱给我们得了,开个玩笑~
解决方案
有问题,咱们就得解决,在面向谷歌编程许久,终于觅得一良方:
oninvalid:提交的输入元素的值为无效值时(这里是正则验证失败),触发
oninvalid事件.oninvalid属于形式事件。
setCustomValidity():这个是HTML5内置的JS方法,用来自定义提示信息
原来可以通过> & lt; !DOCTYPE html> & lt; html lang=癳n"祝辞 & lt; head> & lt;元charset=癠TF-8"祝辞 & lt; title> Test & lt;/head> & lt; body> action=& lt;形式““比; & lt;标签比; 数字:& lt;输入类型=皌ext"模式=癪 \ d{11} $“>感谢你能够认真阅读完这篇文章,希望小编分享H5表单验证失败该如何提示内容对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,遇到问题就找,详细的解决方法等着你来学习!