HTML表单验证通过客户端即时反馈提升用户体验，需结合服务端校验确保安全。1. 使用HTML5属性如required、type="email"、pattern等实现基础验证；2. 通过JavaScript监听submit事件进行自定义逻辑判断与错误提示；3. 利用CSS的:valid、:invalid等伪类优化输入状态视觉反馈。示例代码展示用户名、邮箱、手机号验证及密码一致性检查，强调前端验证辅助交互，后端仍须最终校验数据合法性。
HTML表单验证是确保用户输入符合要求的重要步骤，客户端验证能即时反馈错误，提升用户体验。它不替代服务端验证，但能减少无效请求，提高交互效率。
使用HTML5内置属性实现基础验证
现代浏览器支持通过HTML5属性自动完成基本验证，无需JavaScript即可生效。
- required：标记必填字段，用户必须填写内容才能提交
- type="email"：验证输入是否为合法邮箱格式
- type="number"：限制只能输入数字，可配合min和max设置范围
- pattern：使用正则表达式自定义验证规则，如手机号、身份证等
- minlength 和 maxlength：控制输入字符长度
<form>
<input type="text" name="username" required minlength="3" placeholder="用户名至少3位">
<input type="email" name="email" required placeholder="请输入邮箱">
<input type="tel" pattern="[0-9]{11}" required placeholder="输入11位手机号">
<button type="submit">提交</button>
</form>
使用JavaScript进行自定义验证
当HTML5内置功能不够用时，可用JavaScript增强控制逻辑。
- 监听表单的 submit 事件，调用 preventDefault() 阻止默认提交
- 获取各字段值并判断合法性，比如确认密码是否一致
- 通过修改DOM显示错误提示信息
- 验证通过后再手动提交表单或发送AJAX请求
const form = document.querySelector('form');
form.addEventListener('submit', function(e) {
const password = document.getElementById('password').value;
const confirm = document.getElementById('confirm').value;
if (password !== confirm) {
e.preventDefault();
alert('两次密码不一致');
}
});
结合CSS提升用户体验
利用伪类样式让用户更直观地看到输入状态。
立即学习“前端免费学习笔记（深入）”；
- :valid：匹配通过验证的输入框，可设绿色边框
- :invalid：匹配未通过项，标红提示
- :focus：聚焦时高亮当前字段
input:valid { border-color: green; }
input:invalid { border-color: red; }
input:focus { outline: none; box-shadow: 0 0 5px #aaa; }
基本上就这些。合理使用HTML5原生特性加上少量JS，就能构建出响应快、体验好的表单验证机制。注意别完全依赖前端，关键数据仍需后端再次校验。
