正则表达式 单选按钮实现注册表单验证

2简单的表单验证：
1、姓名不能为空，并且姓名中不能有数字
2、密码不能为空，并且密码包含的字符在6-16之间
3、两次输入的密码必须一致
4、Email格式必须正确

img

引用 皆我百晓生 小程序回复内容作答：

可以使用正则表达式来实现注册表单的验证。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>注册表单验证</title>
</head>
<body>
  <h1>注册</h1>
  <form id="registerForm" onsubmit="return validateForm()">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name"><br>

    <label for="password1">密码：</label>
    <input type="password" id="password1" name="password1"><br>

    <label for="password2">确认密码：</label>
    <input type="password" id="password2" name="password2"><br>

    <label for="email">Email：</label>
    <input type="email" id="email" name="email"><br>

    <input type="submit" value="注册">
  </form>

  <script>
    function validateForm() {
      var name = document.getElementById("name").value;
      var password1 = document.getElementById("password1").value;
      var password2 = document.getElementById("password2").value;
      var email = document.getElementById("email").value;

      var nameRegex = /^[^0-9]+$/;
      var passwordRegex = /^.{6,16}$/;
      var emailRegex = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;

      if (name === "" || !name.match(nameRegex)) {
        alert("姓名不能为空，并且不能包含数字");
        return false;
      }

      if (password1 === "" || !password1.match(passwordRegex)) {
        alert("密码不能为空，并且密码长度需在6-16之间");
        return false;
      }

      if (password1 !== password2) {
        alert("两次输入的密码不一致");
        return false;
      }

      if (email === "" || !email.match(emailRegex)) {
        alert("Email格式不正确");
        return false;
      }

      return true;
    }
  </script>
</body>
</html>

在上述代码中，我们首先给注册表单添加了一个submit事件的监听器，在表单提交之前会执行validateForm()函数来验证表单。在validateForm()函数中使用了一些正则表达式来实现不同的验证规则。

  • 对于姓名的验证，我们使用了^[^0-9]+$的正则表达式来匹配姓名中不能包含数字的规则。
  • 对于密码的验证，我们使用了^.{6,16}$的正则表达式来匹配密码长度在6-16之间的规则。
  • 对于邮箱的验证，我们使用了^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$的正则表达式来匹配常见的邮箱格式规则。

如果验证不通过，会弹出一个提示框告知用户具体错误信息，并返回false阻止表单提交。如果验证通过，则返回true允许表单提交。

以上代码只是一个简单示例，实际应用中可能还需要考虑其他方面的验证，如是否允许特殊字符、是否需要验证手机号等等。根据实际需求来修改正则表达式即可。