required 属性为布尔属性，存在即生效，写 required 或 required="" 均正确，而 required="false" 反致必填；浏览器原生校验无需 JS，支持 :required 伪类与 hasAttribute('required') 判断。
required 属性本身就能被浏览器原生识别
只要在 、 或 元素上写了 required，浏览器就会自动执行必填校验——不需要 JS 绑定事件，也不依赖 CSS 类名或 data 属性。这个属性是布尔属性，写上即为 true，不写即为 false。
常见误操作：写成 required="false" 或 required="0"，这反而会让字段变成必填，因为只要属性存在，值是什么都不影响判定。
-
required（✅ 正确） -
required=""（✅ 也正确，空字符串仍视为存在） -
required="false"（❌ 错误，依然触发必填） -
required="required"（✅ 合法但冗余）
用 CSS 选中所有必填字段并加视觉提示
浏览器提供 :required 伪类，可直接匹配带 required 属性的表单控件。配合 ::after 或边框/颜色变化，能清晰提示用户哪些字段不能留空。
注意：不要只靠颜色区分（如仅红色星号），需确保有足够对比度，且对屏幕阅读器友好——建议同时用 aria-required="true" 显式声明语义。
立即学习“前端免费学习笔记（深入）”；
input:required,
select:required,
textarea:required {
border-color: #2196f3;
}
input:required::after {
content: " *";
color: #f44336;
font-size: 0.9em;
}
JS 中判断某个字段是否必填：优先读取 required 属性而非 validity
别用 element.validity.valueMissing 来反推是否必填——它只反映当前值状态（比如字段为空时才为 true），而 required 是静态定义。真正要识别“设计上是否必须填写”，应直接查 DOM 属性。
-
el.hasAttribute('required')（✅ 推荐，准确反映 HTML 定义） -
el.required（✅ 等价，返回布尔值，但注意 IE9+ 才支持该属性反射） -
el.validity.valueMissing（❌ 不适合识别“是否必填”，只适合校验时判断“当前是否缺失”）
required 在不同 input type 下的行为差异
不是所有 type 都会触发相同级别的校验反馈。例如：
-
：既校验“非空”，也校验“是否符合邮箱格式” -
：空值会触发valueMissing，但输入字母会触发badInput，两者不同 -
：只有勾选才通过，未勾选时提交报错 -
：同组中至少一个被选中才算通过
特别注意：type="hidden" 即使加了 required，浏览器也不会校验——因为不可见、不可交互，HTML 规范明确排除了 hidden 的 required 校验逻辑。
