如何解决HTML5表单验证失败的提示语问题 - 行业资讯 - 肥雀云

　　介绍

这篇文章将为大家详细讲解有关如何解决HTML5表单验证失败的提示语问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,前端的童鞋在写页面时,都不可避免的总会踩到表单验证这个坑。这时候,我们就要跪了,因为要写一堆js来检查。但是自从H5出现后,很多常见的表达验证,它都已经帮我们实现了,让我们减轻了很多负担,本文我们就和大家分享HTML5表单验证失败的提示语问题。

邮箱地址验证:

& 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>

如何解决HTML5表单验证失败的提示语问题

邮箱验证是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}“美元;alt="如何解决HTML5表单验证失败的提示语问题">

终于不是那个蛋疼的“格式“了,现在表单验证提示已经很明确的告诉我们,这里应该输入的是什么样的数据,这样用户就能更好的修改自己的输入了!

关于如何解决HTML5表单验证失败的提示语问题就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。