JavaScript表单验证须以前端为体验防线但不可依赖，应使用addEventListener绑定submit事件、调用preventDefault()阻止默认提交，结合checkValidity()和reportValidity()复用浏览器校验能力，并通过setCustomValidity()支持自定义规则。
JavaScript 表单验证不能只靠前端，onsubmit 拦不住绕过行为，但它是用户体验的第一道防线——必须做，且要做得轻、准、可维护。
用 addEventListener('submit') 替代 onsubmit 属性
内联 onsubmit="return validate()" 不仅污染 HTML，还限制逻辑复用和调试。现代写法绑定在 JS 中，便于统一控制、插入日志或异步校验。
- 表单元素必须有
id或能被唯一选中（如document.querySelector('form')） - 务必调用
event.preventDefault()，否则表单会直接提交并刷新页面 - 验证失败后，聚焦第一个错误字段（
input.focus()）比弹alert更友好
const form = document.getElementById('userForm');
form.addEventListener('submit', function (event) {
if (!validateEmail(form.email.value)) {
event.preventDefault();
form.email.focus();
showError(form.email, '请输入有效的邮箱');
}
});
checkValidity() 和 reportValidity() 能省不少事
原生表单约束（required、type="email"、minlength 等）已内置校验逻辑，直接调用这些方法可复用浏览器能力，避免重复造轮子。
-
input.checkValidity()返回布尔值，适合静默判断 -
form.reportValidity()触发默认气泡提示，且自动聚焦首个无效字段 - 注意：自定义校验需配合
setCustomValidity()，否则checkValidity()始终返回true
const password = document.getElementById('password');
password.addEventListener('input', () => {
if (password.value.length < 8) {
password.setCustomValidity('密码至少 8 位');
} else {
password.setCustomValidity(''); // 清空才能通过校验
}
});
正则校验别硬写，优先用 type + pattern + title
比如手机号、身份证、URL 等格式，用 <input type="tel"> 或 pattern 属性交由浏览器处理，JS 只兜底增强逻辑（如区号校验、18位身份证末位校验）。
立即学习“Java免费学习笔记（深入）”；
-
pattern的正则不带/^...$/，浏览器自动锚定首尾 -
title是用户 hover 时看到的提示，也是reportValidity()显示的文案 - 复杂规则（如“密码需含大小写字母+数字”）建议拆成多个
<span>实时反馈，而非一次性报错
<input
id="idCard"
type="text"
pattern="[0-9]{17}[0-9Xx]"
title="请输入18位身份证号码"
required>
真正难的不是写校验逻辑，而是把错误信息及时、准确、不打断流程地呈现给用户；还有就是服务端永远要重验——前端验证只是防呆，不是设防。
