HTML5原生required和pattern能满足简单场景的基础验证，如非空、邮箱格式、最小长度等，但存在样式不可控、错误信息无法自定义、不支持异步校验及老版Safari兼容性问题。
HTML5 原生 required 和 pattern 能否满足基础验证？
能，但仅限简单场景。比如邮箱格式、非空、最小长度等，浏览器会自动拦截提交并显示默认提示。但默认样式不可控、错误信息无法自定义、不支持异步校验（如用户名是否已存在），且部分老版本 Safari 对 pattern 支持不稳定。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
required标记必填项，比 JS 判断更轻量且语义正确 -
pattern写正则时注意：它默认是「全匹配」，正则两端不用加^和$（浏览器自动加上） - 避免在
pattern里写过于复杂的正则，比如中文手机号校验，建议交给 JS 处理 - 配合
title属性可修改原生提示文字，例如：<input pattern="\d{6}" title="请输入6位数字">
用 JavaScript 监听 submit 事件做手动验证的要点
这是最通用、可控性最强的方式，适合所有表单结构和校验逻辑。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须调用
event.preventDefault()，否则表单仍会提交 - 不要只依赖
input的value，要检查value.trim()，避免空格绕过非空校验 - 对多个字段逐个验证，任一失败就立即返回，不要等全部跑完再汇总——用户需要即时反馈
- 验证失败后，聚焦第一个出错的
<input>（element.focus()），提升可访问性 - 示例片段：
form.addEventListener('submit', function(e) { e.preventDefault(); const email = document.getElementById('email').value.trim(); if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { alert('邮箱格式不正确'); document.getElementById('email').focus(); return; } // 继续其他字段... });
如何让错误提示不依赖 alert 且不打断操作流？
弹窗阻塞交互，体验差。推荐在输入框下方或右侧插入实时、可清除的提示文案。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 为每个
<input>配一个<small class="error"></small>元素，初始display: none - 验证失败时，设置该
small的textContent并显示（style.display = 'block'） - 验证通过后，清空文本并隐藏，而不是留着“✓”符号——避免用户误以为系统已记住状态
- 给输入框添加
aria-invalid="true"和aria-describedby="error-id"，方便读屏软件识别 - 别用
placeholder显示错误信息，它会在用户输入时消失，违反 WCAG
为什么不能只靠前端验证？
因为前端验证可以被轻易绕过：禁用 JS、直接改 DOM、用 Postman 提交等。任何涉及数据安全、业务规则（如余额是否充足）、唯一性判断（如用户名是否存在）的逻辑，都必须在后端重复校验。
容易被忽略的地方：
- 前端验证只是用户体验层的“加速器”，不是安全边界
- 后端收到数据后，仍需独立执行完整校验逻辑，不能信任
req.body中的任何字段 - 前后端正则尽量保持一致（比如手机号格式），否则用户在前端看到“通过”，后端却报错，体验割裂
- 如果后端返回校验失败，应把具体字段错误映射回对应 DOM 节点，而不是只显示“提交失败”
