required仅校验非空，不触发pattern等自定义规则；pattern默认不校验空值，需手动干预验证流程，推荐用submit事件拦截+checkvalidity()+reportvalidity()统一控制。
HTML 的 required 属性本身不触发自定义校验规则，它只做最基础的“非空”判断；想配合自定义规则（比如邮箱格式、最小长度、正则匹配），必须手动干预验证流程，否则浏览器默认行为会绕过你的逻辑。
为什么 required 和 pattern 一起用时仍可能跳过校验
常见现象：表单提交时，required 生效了，但 pattern 没触发，或者只在焦点离开时提示，提交却直接通过。这是因为浏览器对 pattern 的校验默认仅在用户交互（如输入、失焦）后才激活，且若字段为空，pattern 根本不会执行——required 已经“接管”了空值判定。
-
pattern不校验空值，哪怕写了pattern=".{1,}"，空字符串也视为“不满足 pattern”，但浏览器不会因此阻止提交，除非同时有required - 若你用 JavaScript 手动调用
checkValidity()，它会同时检查required和pattern，但原生 submit 事件不一定等你这一步 - 某些旧版 Safari 对
pattern支持不一致，正则中的 Unicode 字符（如中文）可能被忽略
用 addEventListener('submit') 拦住原生提交再校验
这是最可控的方式：不让表单走默认流程，自己统一判断，再决定是否提交。适用于需要组合多个规则（比如“必填 + 邮箱格式 + 不能是 test@example.com”）的场景。
- 必须在
event.preventDefault()后调用form.checkValidity()，否则浏览器仍可能按默认逻辑走 - 如果要显示自定义错误提示，别只依赖
setCustomValidity()，需配合reportValidity()触发 UI 反馈 - 注意重置自定义错误：每次校验前，先对每个字段调用
input.setCustomValidity('')，否则上次的错误会残留
form.addEventListener('submit', e => {
e.preventDefault();
const email = document.getElementById('email');
email.setCustomValidity('');
if (!email.value) {
email.setCustomValidity('邮箱不能为空');
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value)) {
email.setCustomValidity('请输入有效邮箱');
} else if (email.value === 'test@example.com') {
email.setCustomValidity('该邮箱不可用');
}
if (!form.checkValidity()) {
form.reportValidity();
return;
}
// 此处再发 AJAX 或 submit()
});
novalidate 属性不是“关掉校验”，而是“关掉浏览器默认反馈”
加了 novalidate 的表单，required 和 pattern 的约束依然存在，只是提交时不弹红框、不聚焦、不中断流程——checkValidity() 仍返回布尔值，validity 对象也照常工作。它适合完全接管校验逻辑的项目（比如用 React 或 Vue 做表单管理）。
- 误以为加了
novalidate就不用写校验逻辑，结果后端收到非法数据 - 加了
novalidate却没配 JS 校验，等于裸奔 - 移动端键盘类型（如
inputmode="email"）不受novalidate影响，该弹邮箱键盘还是弹
真正麻烦的不是怎么写规则，而是不同浏览器对 validity 对象字段的解释差异——比如 validity.badInput 在 Chrome 和 Firefox 对 number 输入的处理就不一样；还有，用 input 事件实时校验时，中文输入法未上屏的字符会导致 value 滞后，得监听 compositionend 补齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
