基本概念
:invalid 是一个伪类选择器，用于选择那些表单控件中的值不符合其 type 属性所定义的验证规则的元素。例如，如果用户尝试在要求输入数字的输入框中输入文本，那么这个输入框就会被标记为无效。
使用场景
当你需要根据表单输入的有效性来改变样式时，:invalid 选择器非常有用。例如，你可以通过给无效的输入框添加红色边框来提醒用户重新检查他们的输入。
示例代码
// www.javascriptcn.com code example
<form>
<label for="email">Email:</label>
<input type="email" id="email" required>
<button type="submit">提交</button>
</form>
<style>
input:invalid {
border-color: red;
background-color: #ffdddd;
}
input:valid {
border-color: green;
background-color: #ddffdd;
}
</style>在这个例子中，当用户尝试提交表单并且电子邮件地址格式不正确时，输入框会显示红色边框和浅红色背景。一旦用户更正了输入并使其符合电子邮件格式要求，输入框的样式将变为绿色边框和浅绿色背景。
注意事项
:invalid选择器仅适用于具有验证功能的表单控件，如<input>和<textarea>。- 要使
:invalid有效，输入控件通常需要具有required或pattern等属性。 - 在使用
:invalid时，建议同时使用:valid选择器来提供一致的用户体验。
实际应用
在实际项目中，:invalid 选择器可以与 JavaScript 结合使用，以动态地更新表单状态。例如，你可以监听表单的 input 事件，并根据输入的内容实时更改样式。
document.querySelector('input').addEventListener('input', function() {
if (this.validity.valid) {
this.style.borderColor = 'green';
} else {
this.style.borderColor = 'red';
}
});这段 JavaScript 代码会在用户输入时检查输入框的有效性，并相应地改变边框颜色。
总结
:invalid 选择器是前端开发中处理表单验证的重要工具之一。它能够帮助开发者创建更具交互性和用户友好性的表单界面。通过结合 CSS 和 JavaScript，可以实现更复杂和动态的表单验证效果。