大家好！说到网页设计，我们最常见也是必须经历的就是表单验证了。不管你是在搞账号注册、登录，还是在做别的什么，都得先确保人家输入的信息正确无误。现在HTML5越来越牛逼，表单验证也变得更强大了，但在实际操作过程中，我们可能还会碰到一些小麻烦，比如HTML5表单验证不通过时的提示语怎么设置。今天我就来跟大家聊聊这个话题，看看有没有什么办法能帮到你们这些前端开发的小伙伴们。
HTML5的表单验证
Test
html5出来后，做前端开发的人省事儿多！它给了很多表单新属性和特性，直接就能做表单校验，用不着使劲儿地依赖javascript了。就比如说，你想让哪个填表项必须填上，就用’required’这个属性；要是想限制下填表项的格式，像手机号啥的，用个regextype’的属性配上正则表达式就行。有了这些新东西，前端开发变得简单又快。
常见的表单验证需求
咱们搞编程时，总会碰到各种各样的表单校验需求，比如邮件地址、手机号、身份证号等都要校验。HTML5早就帮你想好办法了，比如说添个`type=”email”`,再加上`required`属性就搞定了邮箱校验；如果是手机号校验，那就在`pattern`属性里写上正则表达式就行。
HTML5表单验证失败的提示语问题
Test
虽然HTML5有方便的表单验证功能，但如果没通过验证，系统默认的提示有时有点让人懵逼。就拿邮箱地址来说，如果你输的格式不对，浏览器通常会蹦出个“请按照指定格式来”的话。这个提示可能让普通人摸不着头脑，所以得再加点料，搞点个性化提示才行。
用oninvalid和setCustomValidity来定制验证错误提示。
咱们来说说HTML5表单验证失败的提示！这个其实用`oninvalid`事件和`setCustomValidity()`方法就能搞定。当用户输入的东西不合规矩的时候，就会触发`oninvalid`事件，这时候你就可以在里面调用`setCustomValidity()`方法，把你想要显示的提示信息传进去，这样就能让提示更贴心了。这样一来，用户就能知道自己哪里做错了，也能更好地理解你的要求，提升他们的使用体验！
优化用户体验
在用时，别用太难懂的提示，那样会让人糊涂。咱们就该简单直接点，让他们明白怎么输。当然，你还能加点CSS样式和动画啥的让提示更抢眼。
总结
这么说，虽然HTML5表单验证出问题很让人头疼，但是只要咱们优化得当，个性化设置妥帖，就能解决这个毛病，提升用户体验，加强互动效果。平时做开发时，前端小伙伴们要好好利用HTML5的表单验证功能，再加上自己设计的提示语，给大家带来更舒服、方便的输入感受！
有木有遇到过这样的困扰，咋解决的？来唠嗑下呗！
Test
评论0