表单提交必须调用event.preventDefault()阻止默认行为，否则页面刷新导致JS验证失效；应监听submit事件而非click；验证失败不可手动form.submit()；可复用HTML5原生校验checkValidity()和reportValidity()；自定义规则宜绑定input或blur事件并防抖；setCustomValidity()设置错误信息；后端验证不可或缺。
表单提交时阻止默认行为必须调用 event.preventDefault()
不阻止默认行为，表单会立刻提交并刷新页面，所有 JS 验证逻辑都来不及执行。这是新手最常漏掉的一环。
- 监听
submit事件，不是click—— 后者无法捕获回车提交等场景 -
event.preventDefault()要放在验证逻辑之前，哪怕只是占位，避免误删 - 如果验证失败，不要手动调用
form.submit()，否则绕过 JS 验证
document.querySelector('form').addEventListener('submit', function (e) {
e.preventDefault(); // 必须第一行
if (validateForm()) {
this.submit(); // 验证通过才原生提交
}
});
用 checkValidity() + reportValidity() 复用浏览器原生校验
HTML5 表单属性（required、type="email"、minlength 等）自带基础校验能力，JS 可直接调用，无需重复写正则。
-
input.checkValidity()返回布尔值，不触发 UI 提示 -
input.reportValidity()返回布尔值，同时显示浏览器默认错误气泡 - 对整个表单调用
form.checkValidity()会检查所有子控件，但reportValidity()不支持表单元素，需遍历触发
function validateForm() {
const form = document.querySelector('form');
const isValid = form.checkValidity();
if (!isValid) {
// 手动触发每个无效字段的提示
form.querySelectorAll(':invalid').forEach(el => el.reportValidity());
}
return isValid;
}
自定义验证规则应绑定到 input 或 blur 事件，而非仅靠提交时检查
只在提交时验证，用户体验差；实时反馈能减少用户挫败感，但要注意性能和触发频率。
- 对
input事件做防抖（如 300ms），避免每敲一个字都校验 - 密码确认类场景，更适合监听
blur（失焦）—— 用户输完再比对 - 避免在
input中直接修改value（如自动加空格），可能干扰用户输入节奏 - 自定义错误信息用
setCustomValidity()，清空时传空字符串：el.setCustomValidity('')
const pwdConfirm = document.getElementById('pwd-confirm');
pwdConfirm.addEventListener('blur', function () {
const pwd = document.getElementById('password').value;
this.setCustomValidity(this.value === pwd ? '' : '两次输入的密码不一致');
});
后端验证不可省，前端只是体验层
任何前端验证都能被绕过：禁用 JS、改 DOM、直接发请求。所以 required、pattern、甚至 JS 校验，都只是提升体验的“糖”，不是安全防线。
立即学习“Java免费学习笔记（深入）”；
- 后端必须重新校验所有字段（包括格式、长度、业务逻辑如“用户名不能含敏感词”）
- 前后端正则尽量统一，避免前端提示“邮箱格式错误”，后端却说“邮箱已注册”—— 用户不知道哪步错了
- 服务端返回的错误字段名，最好和表单
name属性一致，方便 JS 映射定位
复杂点在于：异步验证（如用户名是否可用）需要节流、取消重复请求、处理 loading 状态；这些容易被忽略，但直接影响表单可交互性。
