凌晨3点的紧急任务：用正则表达式解决表单验证的烦恼

yingyima
4 阅读1分钟

凌晨3点的紧急任务：用正则表达式解决表单验证的烦恼

凌晨3点，手机铃声刺耳地响起，我几乎是被突然吵醒的。打开手机，看到了服务器发来的报警信息：用户注册界面频繁出现错误输入，导致后端处理异常，甚至触发了服务器的自动保护机制。这个问题让我从床上一跃而起，毕竟用户体验和服务器稳定性是不能忽视的。回到电脑前，我决定这次要彻底解决这个表单验证的老问题，用正则表达式来增强前端的验证能力。

面对眼前的黑屏，我深吸一口气，启动了代码编辑器。用户提交的表单数据是问题的根源，具体涉及到用户名、密码、电子邮件地址和电话号码的验证。这些字段的输入规则各不相同，但正则表达式可以为我们提供一个强大的工具来确保数据的正确性。我开始思考如何用正则表达式来解决这些问题，确保用户只能输入符合要求的数据。

打开项目，我首先检查了用户注册表单的HTML部分。这个表单看起来很普通，包括了几个基本的输入字段。为了确保代码的完整性，这里先放上表单的基本结构：

<form id="signupForm">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" required>
  
  <label for="password">密码：</label>
  <input type="password" id="password" name="password" required>
  
  <label for="email">电子邮件：</label>
  <input type="email" id="email" name="email" required>
  
  <label for="phone">电话号码：</label>
  <input type="text" id="phone" name="phone" required>
  
  <button type="submit">注册</button>
</form>

表单本身没有什么问题，问题出在输入的验证上。接下来，我决定开始写JavaScript代码来添加正则表达式的验证逻辑。首先，我们需要定义几个正则表达式，分别用于验证用户名、密码、电子邮件和电话号码。

用户名验证

用户的名字不能包含特殊字符，至少需要3个字符，最多不超过20个字符。这里用到的正则表达式是：

const usernameRegex = /^[a-zA-Z0-9_]{3,20}$/;
  • ^ 和 $ 分别表示字符串的开始和结束，确保整个字符串都符合规则。
  • [a-zA-Z0-9_] 表示用户名中可以包含大小写字母、数字和下划线。
  • {3,20} 表示用户名的长度必须在3到20个字符之间。

密码验证

密码需要至少8个字符，必须包含大写字母、小写字母、数字和特殊字符（如 !@#$%^&*()）。对应的正则表达式是：

const passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*()]).{8,}$/;
  • (?=.*\d) 确保密码中至少有一个数字。
  • (?=.*[a-z]) 确保密码中至少有一个小写字母。
  • (?=.*[A-Z]) 确保密码中至少有一个大写字母。
  • (?=.*[!@#$%^&*()]) 确保密码中至少有一个特殊字符。
  • .{8,} 表示密码至少需要8个字符。

电子邮件地址验证

电子邮件地址的验证稍微复杂一些，但也有标准的正则表达式可以使用：

const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  • ^ 和 $ 同样表示字符串的开始和结束。
  • [a-zA-Z0-9._%+-]+ 表示邮箱用户名部分可以包含字母、数字、点号、下划线、百分号、加号和减号。
  • @ 是邮箱地址中的固定字符。
  • [a-zA-Z0-9.-]+ 表示域名部分可以包含字母、数字、点号和减号。
  • \.[a-zA-Z]{2,} 表示顶级域名必须以点号开头，后面跟两个或更多的字母。

电话号码验证

电话号码在不同的国家和地区有不同的格式，这里假设我们只需要验证中国的手机号码，11位数字，且必须以1开头：

const phoneRegex = /^1\d{10}$/;
  • ^ 和 $ 表示字符串的开始和结束。
  • 1 表示电话号码必须以1开头。
  • \d{10} 表示后面必须跟10位数字。

有了这些正则表达式，接下来就是将它们应用到表单验证中。我在表单提交的事件监听器中添加了验证逻辑：

document.getElementById('signupForm').addEventListener('submit', function(event) {
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;
  const email = document.getElementById('email').value;
  const phone = document.getElementById('phone').value;
  
  // 验证用户名
  if (!usernameRegex.test(username)) {
    alert('用户名格式不正确');
    event.preventDefault(); // 阻止表单提交
    return;
  }
  
  // 验证密码
  if (!passwordRegex.test(password)) {
    alert('密码格式不正确');
    event.preventDefault(); // 阻止表单提交
    return;
  }
  
  // 验证电子邮件地址
  if (!emailRegex.test(email)) {
    alert('电子邮件地址格式不正确');
    event.preventDefault(); // 阻止表单提交
    return;
  }
  
  // 验证电话号码
  if (!phoneRegex.test(phone)) {
    alert('电话号码格式不正确');
    event.preventDefault(); // 阻止表单提交
    return;
  }
  
  // 如果所有验证都通过，可以提交表单
  console.log('表单验证通过，可以提交了');
});
  • event.preventDefault() 用于阻止表单的默认提交行为，这是在验证不通过时必须的操作，避免无效数据提交到服务器。
  • alert 用于弹出提示信息，告诉用户哪一项输入有误。

完成这些代码后，我测试了一下，一切看起来都很顺利。用户在输入不符合规则的数据时，都会收到相应的提示，并且表单不会提交。这样一来，后端的压力也减轻了不少，服务器的报警频率大幅下降。

不过，这个解决方案虽然有效，但在实际业务中，我们可能需要更复杂的验证逻辑，比如异步验证、表单字段依赖等。这时候，还可以考虑使用一些工具来帮助我们更好地管理定时任务和自动化脚本，例如 Hey Cron。Hey Cron 让你可以在云上轻松管理定时任务，无论是数据清理、日志分析还是其他自动化操作，都能一键搞定。这对于维护服务器的稳定性和优化用户体验都是非常有帮助的。

解决了这个紧急任务，我终于可以安心休息了。正则表达式虽然强大，但使用不当也会带来问题。希望这次的经历能帮到正在面临类似问题的你。

avatar
文章
阅读
粉丝