表单提交按钮点击无效及验证逻辑异常问题求助

问题根源 #

• 表单onsubmit事件写法错误：return(validateEmail(),validate());里的逗号运算符只会返回最后一个函数的执行结果，validateEmail的返回值被直接忽略，导致邮箱格式错误时，虽弹出提示但表单仍会提交。
• validate函数末尾固定返回false，无论所有字段是否验证通过，都直接阻止表单提交；改成return true后，又因忽略邮箱验证结果，出现邮箱格式错误仍提交的问题。

解决步骤 #

1. 修正validate函数的返回逻辑
   把validate函数最后一行的return false;改为return true;，这样当所有字段验证通过时，函数返回true，允许表单提交。

2. 修正表单的onsubmit事件
   将表单的onsubmit属性改为return validateEmail() && validate();。逻辑与运算符&&会先执行validateEmail，只有它返回true（邮箱格式正确），才会继续执行validate；只要任意一个函数返回false，整体就返回false，阻止表单提交。

优化后的完整代码 #

<html>
<head>
  <title>表单验证</title>
  <script type="text/javascript">
    function validate() {
      if (document.myForm.Name.value == "") {
        alert("请输入您的姓名！");
        document.myForm.Name.focus();
        return false;
      }

      if (document.myForm.EMail.value == "") {
        alert("请输入您的邮箱！");
        document.myForm.EMail.focus();
        return false;
      }

      if (document.myForm.Zip.value == "" || isNaN(document.myForm.Zip.value) ||
        document.myForm.Zip.value.length != 5) {
        alert("请输入格式为#####的邮政编码！");
        document.myForm.Zip.focus();
        return false;
      }
      if (document.myForm.Country.value == "-1") {
        alert("请选择您的国家！");
        return false;
      }
      return true;
    }

    function validateEmail() {
      var emailID = document.myForm.EMail.value;
      atpos = emailID.indexOf("@");
      dotpos = emailID.lastIndexOf(".");

      if (atpos < 1 || (dotpos - atpos < 2)) {
        alert("请输入正确的邮箱地址！")
        document.myForm.EMail.focus();
        return false;
      }
      return true;
    }
  </script>
</head>
<body>
  <form action="submit.html" name="myForm" onsubmit="return validateEmail() && validate();">
    <table cellspacing="2" cellpadding="2" border="1">
      <tr>
        <td align="right">姓名</td>
        <td><input type="text" name="Name" /></td>
      </tr>
      <tr>
        <td align="right">邮箱</td>
        <td><input type="text" name="EMail" /></td>
      </tr>
      <tr>
        <td align="right">邮政编码</td>
        <td><input type="text" name="Zip" /></td>
      </tr>
      <tr>
        <td align="right">国家</td>
        <td>
          <select name="Country">
            <option value="-1" selected>[请选择]</option>
            <option value="1">美国</option>
            <option value="2">英国</option>
            <option value="3">印度</option>
          </select>
        </td>
      </tr>
      <tr>
        <td align="right"></td>
        <td><input type="submit" value="提交" /></td>
      </tr>
    </table>
  </form>
</body>
</html>

额外优化建议 #

可以把邮箱验证逻辑直接整合到validate函数中，减少函数调用复杂度，比如在邮箱非空验证后加入格式验证：

function validate() {
  // 姓名验证
  if (document.myForm.Name.value == "") {
    alert("请输入您的姓名！");
    document.myForm.Name.focus();
    return false;
  }

  // 邮箱非空验证
  if (document.myForm.EMail.value == "") {
    alert("请输入您的邮箱！");
    document.myForm.EMail.focus();
    return false;
  }
  // 邮箱格式验证
  var emailID = document.myForm.EMail.value;
  atpos = emailID.indexOf("@");
  dotpos = emailID.lastIndexOf(".");
  if (atpos < 1 || (dotpos - atpos < 2)) {
    alert("请输入正确的邮箱地址！")
    document.myForm.EMail.focus();
    return false;
  }

  // 邮政编码验证
  if (document.myForm.Zip.value == "" || isNaN(document.myForm.Zip.value) ||
    document.myForm.Zip.value.length != 5) {
    alert("请输入格式为#####的邮政编码！");
    document.myForm.Zip.focus();
    return false;
  }
  
  // 国家选择验证
  if (document.myForm.Country.value == "-1") {
    alert("请选择您的国家！");
    return false;
  }
  
  return true;
}

此时表单的onsubmit只需写return validate();，逻辑更清晰。

内容的提问来源于stack exchange，提问作者Aarush Mahajan