form表单添加验证码并当验证通过后再提交表单

岳泽以

发布于 2023-04-27 11:31:36

1.7K00

代码可运行

文章被收录于专栏：岳泽以博客岳泽以博客

运行总次数：0

代码可运行

意思就是，form表单中添加一个验证码验证，然后当点击提交时先核验验证码是否正确，如果正确再提交数据，否则不提交。

form表单

<form class="form-horizontal" action="submit-form.php" method="post"
            onsubmit="return validateCaptcha()">
              <label>验证码：</label>
                  <input type="text" id="captcha" name="captcha">
                  <span id="generated-captcha" onclick="generateCaptcha()">点击加载验证码</span>
                <button type="submit">提交申请</button>
          </form>

在form表单中给onsubmit一个 return validateCaptcha()事件，并添加一个验证码展示区域 id为generated-captcha，点击后获取验证码绑定点击事件generateCaptcha()

验证码生成函数

  function generateCaptcha() {
    var length = 6; // 定义验证码长度
    var charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; // 定义字符集
    var captcha = ""; // 初始化验证码
    // 循环生成指定长度的随机字符串
    for (var i = 0; i < length; i++) {
      captcha += charset.charAt(Math.floor(Math.random() * charset.length));
    }
    // 将生成的验证码显示在文本框中
    document.getElementById("captcha").value = "";
    // 将生成的验证码显示在页面上
    document.getElementById("generated-captcha").innerHTML = captcha;
  }

验证码验证函数

  function validateCaptcha() {
    var input = document.getElementById("captcha").value;
    var generated = document.getElementById("generated-captcha").innerHTML;

    if (input == generated) {
      return true;
    } else {
      return false;
    }
  }

当输入的验证码和随机生成的验证码相同返回true，否则返回false

表单提交事件

// 使用事件监听器来捕获表单提交事件
  var form = document.querySelector("form");
  form.addEventListener("submit", function (event) {
    // 阻止默认的表单提交行为
    event.preventDefault();

    // 执行您想要的功能
    validateCaptcha();

    // 如果验证成功，则手动提交表单
    if (validateCaptcha() == true) {
      form.submit();
    } else {
      alert('验证码输入错误，请重新输入')
    }
  });