这些伪类的判断条件正与浏览器判断你能否提交表单的条件一样，看validationMessage里的值，所以，我们上面设置每次键盘输入事件都会触发一次判断从而改变CSS伪类样式的渲染，用意正在于此。
更好的用户体验
还有一个缺点，就是当一个input设置为required的时候，在初始化时，因为其本身是空的，所以invalid伪类会对它起作用，这不是我们想看到的，因为我们什么还都没有干。
我们可以并在这些伪类前加上父选择器.invalid，这样，只有在父元素具有invalid类时，这些伪类才会起作用。可以设置一个submit事件，在表单提交因验证失败后，会触发input的invalid事件，给form添加invalid类：
form.addEventListener('invalid'， function() {this.className = 'invalid'}， true)因为invaild是Input的事件，而不是form的事件，所以这里我们设置第三个参数为true采用事件捕获的方式处理之。这样，就大功告成了。
最终实例
好了，现在是时候总结一下我们所学的知识并创造最佳实践了：
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>form</title> <style> input:required{ background-color: #DCD4CE; } .invalid input:invalid{ border: 2px solid red; } </style> </head> <body> <form id="form"> <label>email:<input type="email" required id="email"></label> <label>IDCard:<input required id="IDCard"></label> <input type="submit" id="submit"> </form> <script> var email = document.getElementById('email'); var IDCard = document.getElementById('IDCard'); var form = document.getElementById('form'); IDCard.addEventListener('input', function () { if(this.value.length != 6) { this.setCustomValidity('IDCard的长度必须为6') }else{ this.setCustomValidity('') } }); form.addEventListener('invalid', function () { this.className = 'invalid'; }, true) </script> </body> </html> |
运行后截图如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易采站长站。
