pattern校验不自动禁用按钮，因其仅在submit时触发；需用JavaScript监听input事件，调用checkValidity()动态控制按钮disabled状态，并注意type="number"下pattern无效、setCustomValidity需配合重置。
pattern 校验不触发按钮禁用，因为校验只在 submit 时发生
加了 pattern 属性后，提交按钮依然可点，并不会自动变灰——这不是 bug，而是 HTML 原生行为：pattern 只在表单提交瞬间（点击 <button type="submit"> 或回车）才执行匹配，它不监听输入变化，也不影响按钮的 disabled 状态。
也就是说，哪怕用户输了一堆乱码，只要没点提交，按钮就始终可用；而一旦点了提交，浏览器才校验，失败则阻止提交，但按钮本身仍保持“启用”视觉状态。
-
pattern是被动触发的，不是实时监听器 - 按钮是否禁用，完全由开发者手动控制，HTML 不会自动联动
- 想实现“输错就禁用”，必须用 JavaScript 主动监听并判断
用 checkValidity() + input 事件手动控制按钮状态
核心思路是：每次用户输入后，调用 checkValidity() 判断当前字段是否通过 pattern（及 required 等）校验，再据此设置按钮的 disabled 属性。
注意：必须监听 input（非 change），否则中文输入法上屏前就触发，结果不准；同时要处理空值场景——required 字段为空时，checkValidity() 返回 false，但此时 pattern 并未参与校验（优先级规则），所以逻辑里得区分“空”和“非空但格式错”。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 给 input 绑定
input事件，避免漏掉粘贴、删除等操作 - 调用
inputElement.checkValidity()获取当前校验结果 - 按钮
disabled状态 =!inputElement.checkValidity() - 若表单含多个字段，需汇总所有
checkValidity()结果，全为true才启用按钮
<input type="text" id="phone" pattern="^1[3-9]\d{9}$" required>
<button type="submit" id="submitBtn">提交</button>
<script>
const phone = document.getElementById('phone');
const btn = document.getElementById('submitBtn');
function updateButtonState() {
// 注意：checkValidity() 在空值时返回 false（因 required），这正是我们想要的
btn.disabled = !phone.checkValidity();
}
phone.addEventListener('input', updateButtonState);
// 初始状态也要同步一次
updateButtonState();
</script>
为什么 setCustomValidity("") 必须配合 input 事件重置
如果用了 setCustomValidity("错误提示") 自定义文案，后续用户改对了内容，但没调 setCustomValidity("")，那个字段的 validity 状态会一直卡在 invalid，导致 checkValidity() 永远返回 false，按钮就再也无法启用。
这个坑特别隐蔽：用户明明输对了，按钮还是灰色，控制台也无报错，纯属状态残留。
- 只要用了
setCustomValidity()，就必须在input或blur事件里调一次setCustomValidity("") - 不能只在 submit 时设错误，却不清理
- 更稳妥的做法是：每次
input都先清空，再按需设错
type="number" 的 pattern 完全无效，别白费劲
如果你把手机号或邮编这类数字字符串用 type="number"，再配 pattern，它根本不起作用。浏览器对 number 类型有自己的解析逻辑（比如自动过滤非数字字符、允许小数点和负号），pattern 属性会被直接忽略。
正确做法是：把这类“看起来像数字、实则需严格格式”的字段统一用 type="tel" 或 type="text"，再配 pattern 和 inputmode="numeric"（提升移动端键盘体验）。
-
type="number"只适合真正参与计算的数值字段（如年龄、价格） -
type="tel"对手机号更友好：iOS 自动弹数字键盘，且 pattern 生效 - 别信“加了 pattern 就能兜底”，类型不匹配，pattern 就是摆设
<form> 包裹、type="submit" 按钮、字段 name 存在。缺一环，JavaScript 里的 checkValidity() 可能返回 undefined 或始终 true，按钮状态就失控了。 
