表单验证通过JavaScript确保用户输入合法，提升体验并减轻服务器压力。1. 检查必填字段是否为空；2. 使用正则验证邮箱格式；3. 验证手机号是否为中国大陆号码；4. 检查密码长度及复杂度；5. 确认两次密码一致。示例中通过监听表单提交事件，依次验证用户名、邮箱、密码等，若不符合规则则阻止提交并提示错误。
表单验证是前端开发中必不可少的一环，主要用于确保用户输入的数据符合预期格式和规则。JavaScript 提供了灵活的方式实现前端表单验证，既能提升用户体验，又能减轻服务器压力。下面介绍几种常见的 JS 表单验证方法，并附上实用实例。
基本表单验证逻辑
在提交表单前，通过 JavaScript 检查输入内容是否合法。如果不符合要求，阻止提交并提示错误信息。
常用验证项包括：
- 必填字段：检查用户是否填写了必要信息
- 邮箱格式：使用正则表达式判断是否为合法邮箱
- 手机号码：验证是否为中国大陆手机号
- 密码强度：检查长度、是否包含数字和字母等
- 确认密码：两次输入是否一致
原生 JavaScript 验证实例
以下是一个简单的注册表单验证示例：
立即学习“前端免费学习笔记（深入）”；
实时验证（输入时提示）
为了更好的交互体验，可以在用户输入时即时验证，比如邮箱格式错误立刻提示。
监听 input 或 blur 事件：
document.getElementById('email').addEventListener('blur', function() {
const email = this.value;
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
this.style.borderColor = 'red';
} else {
this.style.borderColor = 'green';
}
});
使用 HTML5 内置验证属性
现代浏览器支持 HTML5 表单验证，可以简化部分逻辑：
- required：字段必填
- type="email"：自动验证邮箱格式
- type="tel"：提示输入电话号码
- pattern：使用正则自定义验证
例如：
结合 JS 可调用 checkValidity() 方法手动触发验证：
if (document.getElementById('myForm').checkValidity()) {
// 验证通过
} else {
// 显示默认提示或自定义处理
}
基本上就这些。掌握基础验证逻辑后，可进一步封装成通用函数或使用第三方库如 Validator.js、jQuery Validation 等提高开发效率。前端验证不能替代后端安全校验，始终要在服务端再次验证数据。 
