input报错主因是浏览器静默忽略而非JS错误，需从结构（name缺失/大小写错误）、属性（required/minlength/pattern未触发或兼容问题）、事件（未dispatch input事件、setCustomValidity未清空+reportValidity）三方面排查。
input 标签报错大多不是 JavaScript 报错，而是浏览器静默忽略、DOM 行为异常或表单逻辑断裂——直接看控制台往往空空如也，得从结构、属性、事件三处挖根。
input 没反应 / 值取不到：name 属性缺失或拼写错误
服务器收不到数据、document.querySelector('input[name="username"]') 返回 null、FormData 里查无此字段，90% 是 name 没写或大小写不一致（userName ≠ username）。
- 检查每个
<input>、<select>、<textarea>是否显式带name，不能只靠id或class - 服务端接收名必须与
name完全一致（PHP 的$_POST['email']、Node.js 的req.body.email） - 若用
FormData提交，console.log([...new FormData(form)])直接看键值对，比猜更准
required / minlength / pattern 不生效：验证被绕过或未触发
用户输两个字符就提交成功，minlength="6" 形同虚设——不是属性写错了，是浏览器没“认真校验”。
-
required只在表单提交时触发，单独调input.checkValidity()才能手动校验 -
minlength在 iOS Safari 和部分旧版 Chrome 中存在兼容性问题，建议搭配 JS 校验兜底 -
pattern不会自动阻止非法输入，只影响validity.patternMismatch状态；title属性才是它报错时显示的文案来源 - 如果用了
input.value = 'xxx'动态赋值，需手动触发input.dispatchEvent(new Event('input', {bubbles: true}))，否则validity状态不更新
setCustomValidity 设了没提示：状态没清空或没报告
input.setCustomValidity('密码太短') 写了，但用户点提交还是弹原生提示，甚至完全没气泡——因为浏览器只认最后一次 setCustomValidity() 的字符串，且不会自动帮你“重置”。
立即学习“前端免费学习笔记（深入）”；
- 每次合法输入后，必须显式调
input.setCustomValidity('')（注意是空字符串''，不是null、undefined或空格） -
setCustomValidity()本身不触发 UI 提示，要立刻跟input.reportValidity()才能弹气泡 - 表单
submit事件中，别只依赖e.preventDefault()，得先form.checkValidity()判断，失败再form.reportValidity() - iOS Safari 的「完成」键盘按钮不触发
blur，得监听input或change，并在focusout后补调一次reportValidity()
回车刷新页面 / 表单意外提交：form 默认行为没拦住
单个文本框按回车，整个页面 reload ——这是 <form> 的默认提交行为在作祟，和 input 本身无关。
- 最稳解法：
<form onsubmit="return false;">，简单粗暴，适合纯 JS 提交场景 - 若需保留原生校验，改用
event.preventDefault()+form.checkValidity()组合判断 - 避免给
<input type="text">单独绑onkeypress拦 13 键，容易漏掉移动端软键盘「搜索」「前往」等变体按键 - 隐藏一个
<input type="submit" style="display:none">也能破局，但属于 hack，不如直接控 form
最容易被忽略的其实是：所有 HTML5 表单验证属性（required、minlength、pattern）都依赖元素处于一个有效的 <form> 上下文中——脱离 form、被 disabled、或者父级 display: none，验证都会静默失效。别只盯着 input 自己，先确认它“在不在组织里”。
