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>

  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;
    }
  }

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

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

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