贷款申请表单提交失败：validateForm()未定义问题求助

核心错误原因：函数未定义 #

你遇到的validateForm() is not defined错误，根源是script标签同时指定src属性和内部代码。浏览器会优先加载src指向的外部脚本，完全忽略标签内部的JS代码，导致validateForm函数根本没被定义。

分步修复 #

1. 拆分script标签 #

把加载外部SMTP脚本和自定义代码分成两个独立的script标签：

<script src="https://smtpjs.com/v3/smtp.js"></script>
<script>
// 这里放置validateForm等自定义函数
</script>

2. 修正验证码逻辑问题 #

原代码存在多个验证码相关bug：

• 每次validateForm执行都会重复绑定提交按钮点击事件，导致多次触发
• 表单提交时未验证验证码正确性，直接跳转
• 刷新页面清空表单输入，影响用户体验

调整后的验证码逻辑：

// 把验证码初始化和事件绑定移到validateForm外部，仅执行一次
let num1 = document.getElementById('num1');
let num2 = document.getElementById('num2');
const input_val = document.getElementById('input_val');
const refreshBtn = document.getElementById('bttn');

// 生成随机验证码
function generateCaptcha() {
  num1.innerText = Math.floor(Math.random() * 10);
  num2.innerText = Math.floor(Math.random() * 10);
}

// 页面加载时生成初始验证码
window.onload = generateCaptcha;

// 刷新按钮绑定事件
refreshBtn.addEventListener("click", (e) => {
  e.preventDefault(); // 阻止按钮默认提交行为
  generateCaptcha();
});

// 在validateForm中添加验证码验证
function validateForm() {
  // ...（原有表单字段验证代码）

  // 验证码验证
  const sum_result = parseInt(num1.innerText) + parseInt(num2.innerText);
  const res = parseInt(input_val.value);
  if (isNaN(res) || res !== sum_result) {
    alert("验证码错误");
    generateCaptcha(); // 验证失败刷新验证码
    return false;
  }

  // ...（OTP生成和邮件发送代码）
}

3. 完善OTP与邮件发送逻辑 #

原代码中OTP仅在控制台输出，未传入邮件；sendEmail函数被注释；表单onsubmit需返回验证结果，否则验证不通过也会跳转：

• 将onsubmit改为onsubmit="return validateForm();"
• 取消sendEmail函数注释，把生成的OTP插入邮件内容
• 注意：使用Gmail发送邮件需开启应用专用密码（Gmail默认禁止普通密码登录第三方客户端）

调整后的邮件发送部分：

function validateForm() {
  // ...（前面的验证代码）

  // 生成4位OTP
  const generateOtp = () => {
    let otp = "";
    for(let i=0 ; i < 4 ; i++){
      otp += Math.floor(Math.random() * 10);
    }
    return otp;
  };
  const otp = generateOtp();
  console.log("OTP:", otp);

  // 发送验证码邮件
  Email.send({
    Host: "smtp.gmail.com",
    Username: "你的邮箱地址",
    Password: "你的应用专用密码",
    To: document.forms["myForm"]["email"].value,
    From: "你的邮箱地址",
    Subject: "贷款申请验证码",
    Body: `你的4位验证码是：${otp}`,
  })
  .then(function (message) {
    alert("验证码邮件已发送，请查收");
  })
  .catch(err => {
    alert("邮件发送失败：" + err);
    return false; // 发送失败阻止表单提交
  });

  return true; // 所有验证通过，允许表单提交
}

4. 其他细节修复 #

• 名字正则表达式改为regName = /\d/，检查名字是否包含数字（原正则仅检查末尾，逻辑不准确）
• 为贷款金额添加非空与有效性检查
• PAN号正则去掉末尾?，确保严格匹配10位格式

完整修复后的代码示例 #

<head>
  <script src="https://smtpjs.com/v3/smtp.js"></script>
  <script>
    let num1 = document.getElementById('num1');
    let num2 = document.getElementById('num2');
    const input_val = document.getElementById('input_val');
    const refreshBtn = document.getElementById('bttn');

    function generateCaptcha() {
      num1.innerText = Math.floor(Math.random() * 10);
      num2.innerText = Math.floor(Math.random() * 10);
    }

    window.onload = generateCaptcha;

    refreshBtn.addEventListener("click", (e) => {
      e.preventDefault();
      generateCaptcha();
    });

    function validateForm() {
      let name = document.forms["myForm"]["fullName"].value;
      let email = document.forms["myForm"]["email"].value;
      let pan = document.forms["myForm"]["pan"].value;
      let lamount = document.forms["myForm"]["flamnt"].value;
      let regName = /\d/;
      let regEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/g;
      let regPan = /^([a-zA-Z]){5}([0-9]){4}([a-zA-Z]){1}$/;

      // 姓名验证
      if (name.trim() === "" || regName.test(name)) {
        alert("姓名不能为空且不能包含数字");
        return false;
      }

      // 邮箱验证
      if (email.trim() === "" || !regEmail.test(email)) {
        alert("请输入有效的邮箱地址");
        return false;
      }

      // PAN号验证
      if (pan.trim() === "" || !regPan.test(pan)) {
        alert("请输入有效的PAN号码（格式如BBHPM5672K）");
        return false;
      }

      // 贷款金额验证
      if (lamount.trim() === "" || parseInt(lamount) <= 0) {
        alert("请输入有效的贷款金额");
        return false;
      }

      // 验证码验证
      const sum_result = parseInt(num1.innerText) + parseInt(num2.innerText);
      const res = parseInt(input_val.value);
      if (isNaN(res) || res !== sum_result) {
        alert("验证码错误，请重新输入");
        generateCaptcha();
        return false;
      }

      // 生成OTP
      const generateOtp = () => {
        let otp = "";
        for(let i=0 ; i < 4 ; i++){
          otp += Math.floor(Math.random() * 10);
        }
        return otp;
      };
      const otp = generateOtp();
      console.log("OTP:", otp);

      // 发送邮件
      Email.send({
        Host: "smtp.gmail.com",
        Username: "你的邮箱@example.com",
        Password: "你的应用专用密码",
        To: email,
        From: "你的邮箱@example.com",
        Subject: "贷款申请验证码",
        Body: `您好，您的贷款申请验证码为：<strong>${otp}</strong>`,
      })
      .then(function (message) {
        alert("验证码邮件已发送，请查收");
      })
      .catch(err => {
        alert("邮件发送失败：" + err);
        return false;
      });

      return true;
    }
  </script>
</head>

<body>
  <div class="form-container">
    <h1>贷款申请表单</h1>
    <form name="myForm" method="post" action="thankyou.html" onsubmit="return validateForm();">
      <div class="formdesign" id="name">
        姓名:<input type="text" class="form-control" placeholder="请输入您的全名" name="fullName"><span
          class="formerror"></span>
      </div>

      <div class="formdesign" id="email">
        邮箱:<input type="email" class="form-control" placeholder="请输入邮箱" name="email"><span
          class="formerror"></span>
      </div>

      <div class="formdesign" id="panno">
        PAN号码:<input type="text" class="form-control" placeholder="格式如BBHPM5672K" name="pan" maxlength="10"><span
          class="formerror"></span>
      </div>

      <div class="formdesign" id="lamount">
        贷款金额:<input type="number" class="form-control" placeholder="请输入贷款金额" name="flamnt"><span
          class="formerror"></span>
      </div>

      <div class="formdesign">
        输入验证码:<input type="text" placeholder="输入验证码" class="form-control" id="input_val" />
        <p id="operation"><span id="num1">1</span> + <span id="num2">2</span></p>
        <button id="bttn" class="captcha-refresh"><i class="fa fa-refresh"></i>刷新</button>
      </div>

      <input id="btn" class="button" type="submit" value="提交">
      <input class="button" type="reset" value="重置">
    </form>
  </div>
</body>

内容的提问来源于stack exchange，提问作者Siddant Tripathi