验证 Form 表单数据是否正确决定是否跳转页面

2023-12-08 21:25:14

在 Web 开发中，验证用户输入的表单数据至关重要，以确保数据完整性并防止恶意活动。一种常见的验证场景是检查用户输入的密码是否符合特定标准。本文将探讨如何使用 JavaScript 验证 Form 表单数据是否正确，并根据验证结果决定是否跳转页面。

JavaScript 验证

JavaScript 提供了多种方法来验证表单数据，例如：

正则表达式： 用于验证字符串是否匹配特定模式。
HTML5 表单验证： 提供了内置的验证功能，例如 required、pattern 等。
JavaScript 库： 例如 jQuery Validate，提供了强大的表单验证功能。

在本文中，我们将使用正则表达式来验证密码是否符合特定标准：

/^\d{6}$/

此正则表达式检查字符串是否由六个纯数字组成。

表单提交处理

当用户提交表单时，我们需要检查密码是否有效。如果有效，则提交表单并跳转页面；如果无效，则显示错误信息并阻止表单提交。我们可以使用以下 JavaScript 代码实现此逻辑：

const form = document.getElementById("form");

form.onsubmit = function(e) {
  e.preventDefault();

  const password = document.getElementById("password").value;

  if (/^\d{6}$/.test(password)) {
    // 密码有效，提交表单并跳转页面
    form.submit();
    window.location.href = "success.html";
  } else {
    // 密码无效，显示错误信息
    alert("密码必须是六位纯数字！");
  }
};

完整代码

将以下代码添加到 HTML 页面中：

<!DOCTYPE html>
<html>
<body>
  <form id="form">
    <input type="password" id="password" placeholder="输入六位纯数字密码">
    <input type="submit" value="提交">
  </form>

  <script>
    const form = document.getElementById("form");

    form.onsubmit = function(e) {
      e.preventDefault();

      const password = document.getElementById("password").value;

      if (/^\d{6}$/.test(password)) {
        form.submit();
        window.location.href = "success.html";
      } else {
        alert("密码必须是六位纯数字！");
      }
    };
  </script>
</body>
</html>