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