required属性仅在原生表单提交时生效，需确保input在form内、未被preventdefault拦截、form无novalidate属性；javascript校验需trim空格、区分类型边界、动态字段须手动绑定。
直接用 required 属性最省事，但只在原生提交时生效；想稳控流程或兼容旧环境，必须配合 JavaScript 的 checkValidity() 或手动判空。
required 属性为什么有时没反应
它不是实时监听器，只在表单真正提交（比如点击 <input type="submit">、回车、或调用 form.submit()）且满足三个前提时才触发：
-
<input>必须在<form></form>标签内 - 提交动作不能被
event.preventDefault()拦截后又跳过校验直接发请求 -
<form></form>不能带novalidate属性
常见踩坑：用 <button type="button"></button> + fetch() 提交，required 完全不触发——这时候浏览器根本没走校验路径。
JavaScript 手动判空要注意 trim 和类型边界
直接读 input.value === "" 会漏掉纯空格输入；对 type="number" 还得防 NaN；select 要看 selectedIndex，checkbox 得查 checked 状态。
- 文本类：用
input.value.trim() === "" - 数字类：先
const num = Number(input.value); if (isNaN(num) || num === 0 && input.value.trim() === "0")——注意 "0" 是合法值，不能当空处理 -
select：检查select.selectedIndex === 0 && (!select.options[0].value || select.options[0].value === "") -
checkbox：!checkbox.checked才算未填
别忘了 textarea 和 select multiple 也得单独判断，它们的空值逻辑和单选不同。
想统一拦截所有提交，用 submit 事件 + checkValidity()
这是兼顾原生提示和 JS 控制的折中方案：既保留浏览器默认红框+提示，又能插入自定义逻辑。
- 给
form绑定submit事件 - 第一句写
if (!event.target.checkValidity()) return false，让浏览器先跑一遍原生校验 - 之后再加额外规则，比如密码两次输入是否一致：
if (pwd.value !== cpwd.value)，然后调pwd.setCustomValidity("两次输入不一致") - 记得在
input事件里清空自定义错误：pwd.addEventListener('input', () => pwd.setCustomValidity(''))
关键点：不调 checkValidity() 就等于放弃所有原生校验结果，包括 required、pattern、type="email" 的基础判断。
最容易被忽略的是动态插入的表单字段——DOM 新增的 input 不会自动继承 required 行为，也不参与初始 checkValidity()，必须手动绑定事件或重新调用校验逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
