前言

鞋子在书面页的前端，总是在坑内进行形式验证。这时，我们要跪下，因为要写一张JS来检查。但自从H5出现以来，许多常见的表达式验证了，它帮助我们实现了，让我们减轻了很多负担：

电子邮件地址验证：








测试




邮箱：








邮箱验证是由H5支持的，但是我们想验证场景和情况是多种多样的，用js做什么显然没那么可怕，因为H5提供了一个模式属性，让我们来工作！我们可以对指定的正则表达式进行模式化，只需定期编写好验证，不用担心！

正则化11位数字：






测试




人物：








问题

我们可以试试，在输入11位数时，所有的错误，这都要感谢模式。但我们不知道一个可怕的现象，是不是如果我们使用模式的形式进行验证，在验证失败，建议请与请求我一天的格式保持一致，我们的用户知道请求的格式是什么，不能让他们去源，在那的情况下，我们没有直接写网页，让他们给我们一个笑话的钱。

解决方案

有一个问题，我们要解决，面对谷歌编程很长时间，终于找到办法了：

Oninvalid：对输入元素的值提交无效的值（这是一个普通的验证失败），触发

oninvalid事件。oninvalid属于形式的事件。

setcustomvalidity（）：这是HTML5自定义提示信息内置的JS方法

原来，这可以通过定义从oninvalid和setcustomvalidity提示做，和源代码的修改如下：






测试




人物：







结果：


最后，这不是鸡蛋疼的形式。现在表单验证提示符已经清楚地告诉我们应该在这里输入什么数据，以便用户能够更好地修改输入。

以上是一个小演示表单的HTML5验证失败的提示，希望对您有所帮助。如果你有任何问题，请给我留言，萧边会及时给您回复。谢谢您支持网站。