pattern属性需在form内配合submit按钮触发校验，不加form或用onclick提交会绕过校验；正则不写/^$/，空值默认通过需加required；自定义提示须用setcustomvalidity('')清空。
pattern 属性本身不触发提交校验，得靠表单原生行为
HTML 的 pattern 属性不会自动阻止表单提交，它只在调用 checkValidity() 或用户点击提交按钮时由浏览器触发校验。关键点在于：**只有表单（<form></form>）包裹 + 点击 <button type="submit"></button> 或回车，才会激活 pattern 校验并阻止无效提交**。单独给 <input> 加 pattern 但没包在 <form></form> 里，等于没用。
常见错误现象：pattern 写对了，但点击按钮还是直接提交；或者用了 onclick="form.submit()" 绕过表单事件，导致校验被跳过。
- 必须用
<form></form>包裹 input 和 submit 按钮 - 提交按钮必须是
<button type="submit"></button>或<input type="submit">，不能用type="button"+ 手动调用submit() - 校验失败时，浏览器会聚焦到第一个不合法的字段，并显示
title提示（如果设置了）
正则写法要兼顾语义和浏览器兼容性
pattern 的值是正则字符串，**不加 /^...$/ 开头结尾符号**，浏览器会自动锚定整个输入值（即隐式全匹配）。写成 pattern="^[a-z]+$" 反而可能因转义问题出错；正确写法是 pattern="[a-z]+"。
容易踩的坑：
- 中文、空格、特殊符号需显式允许，比如手机号校验别漏掉
+或空格：pattern="[+\s0-9]{11,}"（注意反斜杠要双写） - 某些老版本 Safari 对 Unicode 字符类（如
p{L}）不支持，建议用[a-zA-Zu4e00-u9fa5]替代 - 空值默认通过校验 —— 如果要求必填，必须同时加
required属性
提交按钮状态联动需要监听 validity API
想让按钮随输入实时变灰/启用，不能只靠 pattern，得监听 input 或 blur 事件，手动查 input.checkValidity()。
示例逻辑：
const input = document.querySelector('input');
const btn = document.querySelector('button[type="submit"]');
input.addEventListener('input', () => {
btn.disabled = !input.checkValidity();
});
注意点：
-
checkValidity()返回true表示当前值满足pattern+required+ 其他约束（如minlength） - 不要用
invalid事件做启用逻辑 —— 它只在校验失败时触发，无法覆盖“从错变对”的场景 - 移动端软键盘回车键触发提交时，按钮状态可能滞后，建议加
blur事件兜底
自定义提示文案要用 setCustomValidity 配合
pattern 默认提示是“请匹配所要求的格式”，没法改。要自定义错误信息，必须调用 setCustomValidity()，且**清空时必须传空字符串 ""，不能传 null 或 undefined**，否则后续校验永远失败。
典型用法：
input.addEventListener('input', () => {
if (input.value && !/^[a-z]{3,}$/.test(input.value)) {
input.setCustomValidity('请输入3个以上小写字母');
} else {
input.setCustomValidity(''); // 关键：清空校验态
}
});
这个 API 会覆盖 pattern 和 required 的默认提示，但不会影响校验逻辑本身 —— 它只是改提示文案。
复杂点在于：多个校验规则（比如非空 + 长度 + 格式）要自己合并判断，浏览器不帮你做优先级排序；而且一旦调用了 setCustomValidity，就得自己负责所有校验分支，否则容易锁死状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
