在css中使用 :valid 和 :invalid 伪类实现原生即时表单验证，核心在于利用html5的内置约束（如 required、pattern）配合css选择器直接修改样式。无需javascript即可在用户输入时实时反馈，通过设置不同的背景色或边框颜色来区分有效与无效状态。
:valid 和 :invalid 的基础用法是什么
这两个伪类会根据输入框当前的值是否符合其HTML属性定义的规则来切换状态。例如，带有 type="email" 或 required 属性的 元素，当其值符合格式要求时应用 :valid 样式，否则应用 :invalid 样式。这种机制是实时的，只要输入内容改变，浏览器就会重新评估并更新样式。
.form-input:valid {
border-color: #2ecc71;
background-color: #f0fff4;
}
.form-input:invalid {
border-color: #e74c3c;
background-color: #fdf2f2;
}
上述代码定义了通用输入框的样式。当用户输入符合要求的邮箱地址时，边框变为绿色；若输入非法字符，边框变为红色。注意，默认情况下，未输入任何内容的必填字段会被视为 :invalid，这有助于提示用户该字段为必填项。
如何结合 :placeholder-shown 优化初始体验
直接使用 :invalid 会导致页面加载时所有必填字段都显示错误样式，影响用户体验。通过结合 :placeholder-shown 伪类，可以仅在用户尝试输入或离开焦点后才显示错误状态。具体做法是：当占位符可见且字段无效时，不应用错误样式；当占位符隐藏（即用户已输入）且字段无效时，才应用错误样式。
.form-input:invalid:not(:placeholder-shown) {
border-color: #e74c3c;
background-color: #fdf2f2;
}
.form-input:valid {
border-color: #2ecc71;
background-color: #f0fff4;
}
这段代码确保了只有在用户实际输入了不符合要求的内容后，才会触发红色警告样式。如果用户尚未开始输入（占位符仍显示），即使字段为空（对于 required 而言是无效的），也不会显示错误样式，从而提供更平滑的交互体验。
如何处理自定义正则表达式 pattern 的验证反馈
当使用 pattern 属性定义复杂的验证规则时，:valid 和 :invalid 同样适用。例如，限制密码必须包含大小写字母和数字，可以通过 pattern="[a-zA-Z0-9]+" 实现。浏览器会自动根据该正则表达式评估输入值，并相应地切换伪类状态。开发者只需针对这些伪类编写CSS即可实现即时反馈，无需额外逻辑。
.password-input:invalid:not(:placeholder-shown) {
border-color: #e74c3c;
}
.password-input:valid {
border-color: #2ecc71;
}
在此示例中，.password-input 元素会根据用户输入的字符串是否匹配 pattern 中的正则表达式来应用相应的样式。若输入包含特殊字符或不满足长度要求，将立即显示红色边框；若完全匹配，则显示绿色边框。这种方法简化了前端验证逻辑，提升了开发效率。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
