required属性可原生实现多字段必填校验，浏览器提交时自动检查所有带该属性的input、select、textarea是否为空（含空格），任一为空则阻止提交并聚焦首个未填字段。
用 required 属性最简实现多字段必填
HTML 原生支持多字段必填，不需要 JS 就能触发基础校验。关键在于给每个需要校验的 <input>、<select></select> 或 <textarea></textarea> 添加 required 属性。
浏览器会在表单提交时自动检查所有带 required 的字段是否为空（包括空格、纯换行等），任一为空就阻止提交，并聚焦到第一个未填字段，同时显示默认提示（如 Chrome 显示“请填写此字段”）。
-
required对type="checkbox"和type="radio"有特殊行为：前者要求必须勾选，后者要求同name下至少一个被选中 - 不支持对多个字段做“至少填一个”的逻辑（例如邮箱和电话二选一），那是业务逻辑，需 JS 处理
- 若字段被
disabled或hidden，required会被忽略
用 checkValidity() 主动触发校验并自定义提示
原生提示文案不可控、样式无法修改，且只在提交时触发。如果想在用户离开字段（blur）或点击按钮时提前校验，并统一展示错误信息，就得用 JS。
checkValidity() 是表单控件和 <form></form> 元素都有的方法，返回 true 或 false，同时会触发 invalid 事件（可用于监听）。
- 对单个字段调用：
inputElement.checkValidity()，失败时可配合setCustomValidity('提示文字')覆盖默认提示 - 对整个表单调用：
formElement.checkValidity()，返回false表示任意一个required字段未通过 - 注意：调用
setCustomValidity('')才能恢复校验状态，否则该字段永远报错 - 别依赖
input.validity.valid判断前先确保已触发校验（比如先调一次checkValidity()）
避免常见坑：空格、隐藏字段与动态添加字段
多字段校验出问题，往往不是逻辑写错，而是没处理好边界情况。
- 用户输入空格或制表符，
required默认认为“非空”，但业务上可能算无效——得用trim()后再判断，或监听input事件清理前后空格 - 用 CSS
display: none隐藏的字段仍参与required校验；改用hidden属性或移除required才能跳过 - 动态插入的字段（如 JS 创建的
<input required>），必须在插入 DOM 后再设置required，否则部分浏览器不识别 - 使用
fieldset[disabled]包裹一组字段时，内部所有required字段都会被忽略——这是规范行为，不是 bug
复杂场景下建议组合使用原生 + JS
纯原生 required 适合简单表单；涉及条件必填（如“选了A则B必填”）、跨字段联动（如两次密码一致）、异步校验（如用户名是否已存在），就必须用 JS 控制 setCustomValidity() 和提交拦截。
这时候别全盘抛弃原生能力：保留 required 作为兜底，再用 JS 增强交互和提示。否则容易漏掉移动端软键盘的“完成”按钮触发的原生提交，导致绕过校验。
真正难的不是写校验逻辑，而是把“用户什么时候该看到什么提示”想清楚——比如邮箱格式错误和必填缺失，该分开展示还是合并？不同字段的错误是否要滚动到可视区？这些细节比代码本身更影响体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
