HTML表单验证通过在支持的元素（如input、select、textarea）上添加required布尔属性开启，需确保父级form标签存在且元素未被隐藏；其校验逻辑基于.trim()和value值判断，空格或零宽字符会导致误判，提示文案需用setCustomValidity()配合事件手动控制，且服务端必须二次校验。
HTML表单验证怎么开启？直接加 required 就行，但得加对地方
不是所有表单控件都支持 required，它只对可输入、可提交值的元素生效。比如 <input>（type 不是 hidden、button、submit 等）、<select>、<textarea> 可以用；<div> 或自定义组件加了也白加。
常见错误现象：加了 required 却没触发校验——检查是否用了 type="hidden"，或者父级 <form> 标签漏写了，或者用了 display: none 隐藏但没加 hidden 属性（浏览器仍会校验）。
-
required是布尔属性，写成required="false"或required=""都等价于启用，不推荐带值写法 - 如果表单里有多个
required字段，用户点击提交时，浏览器会聚焦到第一个空字段，并显示默认提示（如“请填写此字段”） - 移动端 Safari 对
<select>的required支持较晚（iOS 12.2+），旧版本可能静默跳过
为什么填了内容还报“请填写此字段”？空格、换行、零宽字符惹的祸
浏览器判断“是否为空”的逻辑很朴素：对 <input> 和 <textarea>，是看 .value.trim() === ""；对 <select>，是看选中的 <option> 是否有 value 且非空字符串。
所以这些情况都会被当成“未填写”：
立即学习“前端免费学习笔记（深入）”；
- 用户只敲了空格或 Tab，
.value是" "，.trim()后为空 -
<select>的首项写成<option value="">请选择</option>—— 这个value=""就触发required拒绝 - 复制粘贴进来的文本含 Unicode 零宽空格（
\u200B），.trim()清不掉
实操建议：开发时用浏览器控制台手动执行 document.querySelector("input").value 看原始值，比肉眼判断更可靠。
想改默认提示文字？别碰 required，用 setCustomValidity()
required 自带的提示无法通过 HTML 属性定制，强行覆盖要用 JS。核心是拦截原生验证流程，用 setCustomValidity() 注入新消息。
关键点：
- 必须在
input或blur事件里调用，且每次都要先调setCustomValidity("")清空旧状态，否则后续验证会卡死 - 只要
setCustomValidity("xxx")的参数是非空字符串，该字段就判定为“无效”，哪怕内容其实合法 - 和
required共存时，优先触发你用 JS 设置的错误，原生提示被压制
示例：
input.addEventListener('input', () => {
if (input.value.trim() === '') {
input.setCustomValidity('用户名不能为空');
} else {
input.setCustomValidity(''); // 必须清空！
}
});
兼容性与绕过风险：别把 required 当后端防线
所有基于 HTML5 的表单验证都只是前端体验增强，完全可被禁用 JS、修改 DOM、绕过浏览器直接发请求等方式跳过。
影响范围：
- IE10+、Edge 12+、Chrome 4+、Firefox 4+、Safari 5+ 支持
required，但 Android 4.3 WebView 有 bug，可能不触发 - 屏幕阅读器（如 NVDA、VoiceOver）会读出
required属性，对无障碍友好，但若用 JS 动态增删，需同步更新aria-required - 如果你在表单里混用了
required和自定义 JS 校验，注意事件触发顺序：原生验证在submit时同步发生，早于 JS 的submit监听器
最常被忽略的一点：服务端永远要重新校验，哪怕前端一切正常。因为 required 只决定“用户是否点了提交”，不保证“数据真的来了”。
