html5表单验证功能,HTML5的表单验证功能? HTML5自带的两种验证方式?

　　前言

　　前端的童鞋在写页面的时候，不可避免的会踩到表单验证坑。这时候我们就要跪下了，因为要写一堆j来检查。但是自从H5的出现，很多常见的表达式验证为我们实现了，减轻了我们的负担，就像下面这样：

　　邮箱地址验证：

　　！doctype html html lang= en headmethacharaset= utf-8 title test/title/headbydyformaction= label mailbox:input type= email /labe input type= submit /form/body/html

　　邮箱验证是H5自己支持的，但是我们需要验证的场景和情况多种多样，怎么办呢？回Js？显然，这并不那么痛苦，因为H5提供了模式属性，这样我们就可以自食其力了！我们可以在pattern中指定正则表达式，只要规则写得好，验证起来没有任何麻烦！

　　正则限定11位数字：

　　！doctype html html lang= en headmethacharaset= utf-8 title test/title/headbydyformaction= label number:input type= text pattern= \ d { 11 } $ /label input type= submit /form/body/html

　　问题

　　你可以试试。当您输入非11位数字时，会出现错误。这是格局的功劳。但是不知道你有没有发现一个蛋疼？也就是说，如果我们使用pattern来验证表单，当验证失败时，它的提示是请保持格式与请求的格式一致。天啊，我们的用户怎么知道请求的格式是什么？我们不能让他们看源代码。如果是这样，我们甚至不需要写页面。请他们给我们钱。开个玩笑~

　　解决方案

　　如果有问题，我们必须解决它。在为Google编程了很久之后，我们终于找到了一个好的解决方案：

　　Oninvalid:当提交的input元素的值无效时触发(这里，常规验证失败)。

　　on无效事件。Oninvalid属于Form事件。

　　SetCustomValidity():这是HTML5内置的JS方法，用于自定义提示信息。

　　原来可以通过oninvalid和setCustomValidity自定义提示，这样就很简单了。按如下方式修改源代码：

　　！doctype html html lang= en headmethacharaset= utf-8 title test/title/headbydyformaction= label number:input type= text pattern= \ D { 11 } $ on invalid= setcustomvalidity(请输入11位数字)/label input type= submit /form/body/html结果：

　　最后，伤人的不是‘格式’。现在表单验证提示已经明确的告诉我们这里应该输入什么样的数据，以便用户更好的修改自己的输入！

　　以上是边肖介绍的HTML5表单验证失败的提示问题。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对网站的支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。