html5原生表单校验通过:valid、:invalid、:required等伪类实现无js视觉反馈；需注意触发时机、层叠顺序及:user-invalid兼容性，推荐结合oninput实时校验与css精准控制样式。
HTML5 原生表单校验结合 :valid、:invalid、:required 等伪类，无需 JavaScript 就能实现输入状态的实时视觉反馈。关键在于理解浏览器自动触发校验的时机（如失去焦点、提交时）和伪类的匹配逻辑，并配合 CSS 精准控制样式。
基础伪类与触发条件
浏览器对 <input>、<select></select>、<textarea></textarea> 元素内置校验状态，对应以下常用伪类：
-
:valid：当前值满足所有约束（如required、type="email"、pattern、min/max等） -
:invalid：值不满足任一约束，或为空且为required -
:required：元素带有required属性 -
:optional：元素无required属性 -
:user-invalid（较新）：用户已与该字段交互（如输入后失焦），且当前值无效 —— 更适合“用户感知后才高亮错误”
实现合法输入高亮的核心写法
直接对输入框设置边框/背景色即可，但要注意层叠顺序和默认样式干扰：
- 用
:valid:not(:placeholder-shown)可排除空值时误判为 valid（尤其 type=text） - 优先使用
:user-invalid替代:invalid，避免页面加载时未输入就显示红框 - 给
:valid添加绿色边框或背景，:user-invalid添加红色边框，:required可加星号或底纹提示必填
示例 CSS：
input {
padding: 8px;
border: 2px solid #ccc;
transition: border-color 0.2s;
}
input:valid:not(:placeholder-shown) {
border-color: #4CAF50;
}
input:user-invalid {
border-color: #f44336;
}
input:required {
background-color: #fff9c4;
}
增强体验的实用技巧
原生校验默认只在提交或失焦后生效，可通过以下方式优化交互反馈：
- 添加
oninput="this.checkValidity()"强制输入时实时校验（注意兼容性，现代浏览器支持良好） - 配合
<label></label>的for属性，点击标签也能聚焦并触发校验 - 用
::placeholder配合:invalid:placeholder-shown在空且非法时隐藏占位符，突出错误态 - 表单提交失败时，
:invalid会强制生效，此时可统一高亮所有非法项
注意事项与边界情况
原生校验行为受浏览器实现影响，需留意：
-
type="number"在输入非数字时，值为""，可能被判定为:invalid即使未失焦 - 某些浏览器对
pattern校验延迟较高，建议搭配title提示正则含义 - 自定义错误提示需用
setCustomValidity()，否则伪类无法反映 JS 主动设置的错误 - 移动端 Safari 对
:user-invalid支持较晚（iOS 15.4+），旧版本仍需降级用:invalid+ JS 控制
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
