注册表单为啥要校验
你有没有遇到过这种情况？填了一大堆信息，点提交，页面一刷新，啥都没了。回头一看，邮箱少了个@符号。这种体验很糟心。表单校验就是为了解决这类问题，在用户提交前就发现问题，及时提醒。
尤其是在注册页面，用户名、密码、邮箱、手机号这些字段，一个填错，后续流程全受影响。提前校验，能省去很多麻烦。
常见的校验项有哪些
先说几个最常见的：
- 邮箱格式是否正确
- 密码长度够不够，是否包含大小写或特殊字符
- 确认密码和第一次输入的一致吗
- 手机号是不是11位，开头是不是合法号段
- 用户名是否为空，有没有特殊字符
这些看似简单，但漏掉任何一个，都可能让数据出问题。
用HTML5原生属性快速实现基础校验
其实不用写JS，HTML5已经自带一些校验功能。比如 required 表示必填，type="email" 会自动判断邮箱格式。
<form>
<input type="text" name="username" placeholder="用户名" required>
<input type="email" name="email" placeholder="邮箱" required>
<input type="password" name="password" placeholder="密码" minlength="6" required>
<input type="password" name="confirm" placeholder="确认密码" required>
<button type="submit">注册</button>
</form>这样用户一提交，浏览器就会自动弹出提示，哪个字段没填或者格式不对。简单又直接。
用JavaScript增强校验逻辑
但光靠HTML5不够灵活。比如你要检查两次密码是否一致，就得加点JS。
<script>
document.querySelector('form').addEventListener('submit', function(e) {
const password = document.querySelector('input[name="password"]').value;
const confirm = document.querySelector('input[name="confirm"]').value;
if (password !== confirm) {
alert('两次密码不一致，请重新输入');
e.preventDefault(); // 阻止提交
}
});
</script>再比如手机号，可以用正则判断是不是以1开头，总共11位。
const phone = document.querySelector('input[name="phone"]').value;
const reg = /^1\d{10}$/;
if (!reg.test(phone)) {
alert('请输入正确的手机号');
e.preventDefault();
}实时提示体验更好
别等到用户点提交才告诉人家错了。可以在输入的时候就给反馈。比如输完邮箱，马上判断格式对不对，不对就标红。
给输入框加上 input 事件监听：
document.querySelector('input[name="email"]').addEventListener('input', function() {
const value = this.value;
const reg = /^[^@]+@[^@]+\.[^@]+$/;
if (!reg.test(value)) {
this.style.borderColor = 'red';
} else {
this.style.borderColor = 'green';
}
});这样用户一边打字一边看到结果，体验顺滑多了。
后端也得校验，别偷懒
前端校验是为了用户体验，但不能代替后端。有人可以绕过页面直接发请求。所以服务器那边还得再检查一遍，确保数据安全。
前后端双保险，才是靠谱的做法。别觉得前端校好了就万事大吉，那只是第一道门。
小技巧：把错误信息显示在页面里
用 alert 弹窗太老派，还容易被拦截。更好的方式是在输入框下面加个提示文字。
<p>密码：<input type="password" name="password" id="password"></p>
<p class="error" id="pwd-error"></p>然后JS控制显示：
if (password.length < 6) {
document.getElementById('pwd-error').textContent = '密码至少6位';
} else {
document.getElementById('pwd-error').textContent = '';
}这样页面更整洁，用户也不会被打断操作。
做好表单校验，不只是技术活，更是对用户的尊重。谁都不想反复填表，一次到位，大家都轻松。