JavaScript表单验证核心在于触发时机与反馈机制：推荐input事件+防抖实时校验，配合checkValidity()、setCustomValidity()和reportValidity()实现精准控制；pattern属性适用于简单格式约束；异步验证需在blur时处理并动态更新状态。
JavaScript 表单验证的核心不是“有没有方法”，而是“什么时候验证、谁来触发、怎么反馈”。原生 checkValidity() 和 reportValidity() 已足够处理大多数场景，但直接依赖 submit 事件容易漏掉用户中途修改后的状态变化。
用 addEventListener('input') 实时校验比等提交更可靠
用户在输入过程中就提示错误，体验远好于点提交后才弹红框。关键是避免频繁触发（比如中文输入法组合字符时），推荐用 input 事件 + setTimeout 防抖，而不是 keyup（会拦截粘贴、删除等操作）。
-
input事件天然兼容剪贴板操作、拖放、自动填充，keyup无法捕获粘贴内容 - 对
type="email"或required字段，直接调用element.checkValidity()即可判断是否符合约束 - 验证失败时，用
element.setCustomValidity('邮箱格式不正确')自定义提示，再调用element.reportValidity()显示浏览器原生气泡（注意：必须先设再报，否则无效）
pattern 属性配合正则比手写 JS 校验更轻量
浏览器原生支持 pattern，适用于简单格式约束（如手机号、身份证前6位）。它和 title 搭配能控制错误提示文案，且无需 JS 就能阻止表单提交。
<input
type="text"
pattern="[1-9]\d{5}"
title="请输入6位非零开头的数字（如邮政编码）"
required>
-
pattern正则默认是全文匹配（类似^...$），不用手动加首尾锚点 - 移动端软键盘会根据
type（如tel、email）自动切换，但pattern不影响键盘类型，仅作校验 - 复杂逻辑（如“密码需含大小写字母+数字”）仍需 JS，在
input事件里用RegExp.test()判断
禁用原生验证（novalidate）后，checkValidity() 仍有效
加了 novalidate 是为了关掉浏览器默认的提交拦截和气泡提示，不是废掉验证能力。所有基于约束 API 的方法（checkValidity、setCustomValidity、validity 对象）依然可用，只是需要你手动控制提示方式（比如加 class、插 DOM）。
立即学习“Java免费学习笔记（深入）”；
-
form.checkValidity()返回布尔值，表示整个表单是否通过约束校验 -
input.validity是只读对象，包含valueMissing、typeMismatch、patternMismatch等具体原因，可用于精细化反馈 - 手动触发验证时，别忘了清空旧的
setCustomValidity('')，否则后续checkValidity()会一直返回 false
真正容易被忽略的是异步验证场景（比如用户名是否已存在）。这时不能只靠 HTML 约束，得监听 blur 发请求，并用 setCustomValidity() 动态更新状态——但要注意请求未完成时，不要提前覆盖错误信息，否则用户看到的是过期提示。
