应优先使用HTML5原生属性（required、type、pattern）做基础校验兜底，再用JavaScript增强交互反馈、组合逻辑与异步校验；checkValidity()仅返回布尔值，reportValidity()才触发提示；异步校验需手动管理状态并防抖；复杂规则放JS，简单规则用pattern。
表单验证该用 required 还是 JavaScript 手动检查？
浏览器原生的 required、type="email"、pattern 等属性能拦截基础错误，但它们只在提交时触发，且样式和提示不可控。真正需要交互反馈（比如实时校验手机号格式、用户名是否被占用）或组合逻辑（“密码和确认密码必须一致”）时，必须用 JavaScript 主动干预。
建议策略：HTML5 属性做兜底 + JS 做增强。既保留无障碍支持和基本防护，又不牺牲体验。
- 始终为
<input>设置required和合适的type（如type="tel"触发手机键盘） - 用
addEventListener('input', ...)监听实时输入，避免只等submit - 提交前仍需用 JS 再次校验——用户可能禁用 JS 或绕过前端逻辑
checkValidity() 和 reportValidity() 怎么用才不翻车？
这两个方法是原生验证 API 的核心，但容易误用：checkValidity() 只返回布尔值，不触发 UI 提示；reportValidity() 才会显示浏览器默认气泡提示并返回布尔值。直接调 form.reportValidity() 是最简提交校验方式，但它无法自定义错误文案。
const form = document.querySelector('#signup-form');
form.addEventListener('submit', (e) => {
if (!form.checkValidity()) {
e.preventDefault();
// 不要只靠 checkValidity() —— 用户看不到错在哪
form.reportValidity(); // 这句才真正弹出提示
}
});
- 不要在
input事件里频繁调reportValidity()，会导致提示反复闪现 - 若需自定义提示，应调
setCustomValidity('用户名已存在')，再调reportValidity() - 调用
setCustomValidity('')清除自定义错误，否则后续checkValidity()一直返回false
异步校验（如用户名可用性）如何避免阻塞提交？
异步校验不能依赖原生 reportValidity()，因为它是同步的。必须手动管理验证状态，把“正在请求中”、“校验失败”、“校验通过”映射到 input 的视觉反馈和表单可提交性上。
立即学习“Java免费学习笔记（深入）”；
const usernameInput = document.querySelector('#username');
const submitBtn = document.querySelector('#submit-btn');
usernameInput.addEventListener('blur', async () => {
const value = usernameInput.value.trim();
if (!value) return;
usernameInput.setCustomValidity('检查中...');
submitBtn.disabled = true;
try {
const res = await fetch(`/api/check-username?name=${encodeURIComponent(value)}`);
const { available } = await res.json();
usernameInput.setCustomValidity(available ? '' : '该用户名已被注册');
} catch {
usernameInput.setCustomValidity('网络错误，请重试');
} finally {
usernameInput.reportValidity();
submitBtn.disabled = false;
}
});
- 仅在
blur或防抖后的input中发起请求，避免高频调用 - 务必在
finally中恢复按钮状态，否则用户可能卡死在“提交不可用”状态 - 服务端返回的错误码比字符串更可靠，前端应优先判断
res.ok和状态码，而非依赖错误文案
正则校验写在 JS 里还是 pattern 属性中？
简单规则（如邮箱、数字范围）优先用 pattern，浏览器会自动集成进 checkValidity() 流程；复杂逻辑（如“密码需含大小写字母+数字+特殊符号，且不含连续重复字符”）必须放 JS 里，否则 pattern 会变得难以维护且无法提供分步提示。
