JS提交表单的5种方法及表单验证实现

引言：JS提交表单的必要性

在实际开发中，经常遇到表单提交的兼容性问题。有时在IE浏览器中运行正常的提交操作，切换到Firefox等浏览器时却会失败，特别是依赖默认提交按钮时。此时，采用JavaScript主动控制提交流程往往能解决问题。尽管具体原因可能涉及浏览器默认行为差异，但通过JS实现提交已成为一种可靠方案。以下总结了几种常见的表单提交及验证方法。

在form标签中绑定onsubmit事件

第一种方式：在form标签中直接绑定onsubmit事件，通过该事件处理函数返回true或false来控制表单是否提交。如果验证通过返回true，表单正常提交；若返回false，则阻止提交。


<script type="text/javascript">
   function validate(obj) {
    if (confirm("提交表单?")) {
      alert(obj.value);
      return true;
    } else {
      alert(obj.value);
      return false;
    }
   }
 </script>
 <body>
  <form action="https://www.jb51.net" onsubmit="return validate(document.getElementByIdx_x('myText'));"> <!—参数的这种写法注意下-->
  
    <input type="text" id="myText"/>
    <input type="submit" value="submit"/>
  
  </form>
</body>

通过button按钮触发提交并处理验证

第二种方式：使用type为button的按钮，通过onclick属性调用submitForm()函数来触发表单提交。需要注意的是，这种方式会忽略form标签上的onsubmit属性，导致其失效。因此，若需要进行表单验证，必须将验证逻辑封装在submitForm()方法内部执行。


<script type="text/javascript">
   function validate() {
    if (confirm("提交表单?")) {
      return true;
    } else {
      return false;
    }
   }
   
   function submitForm() {
    if (validate()) {
      document.getElementByIdx_x("myForm").submit();
    }
   }
 </script>
 <body>
  <form action="https://www.jb51.net" id="myForm">
  
    <input type="text"/>
    <input type="button" value="submitBtn" onclick="submitForm();"/> <!—也可以使用document.getElementByIdx_x(“该按钮的id”).click();来执行onclick事件-->
  
  </form>
</body>

在submit按钮上绑定onsubmit的局限性

第三种方式：将onsubmit事件直接绑定在type为submit的input标签上，而非form标签。这种写法通常会导致表单验证逻辑失效，因为onsubmit在submit按钮上可能不被浏览器正确识别或执行，点击提交按钮后表单会直接提交，不经过预期的验证流程。


<script type="text/javascript">
   function validate() {
    if (confirm("提交表单?")) {
      return true;
    } else {
      return false;
    }
   }
 </script>
 <body>
  <form action="https://www.jb51.net">
  
    <input type="text"/>
    <input type="submit" value="submit" onsubmit="return validate()"/>
  
  </form>
</body>

为submit按钮添加onclick进行验证

第四种方式：为type为submit的按钮添加onclick事件，用于执行表单提交的验证逻辑。这种方式的效果类似于在form标签中增加onsubmit事件，能够在提交前进行条件判断，若验证通过则允许提交，否则阻止。


<script type="text/javascript">
   function validate() {
    if (confirm("提交表单?")) {
      return true;
    } else {
      return false;
    }
   }
 </script>
 <body>
  <form action="https://www.jb51.net">
  
    <input type="text"/>
    <input type="submit" value="submit" onclick="return validate()"/>
  
  </form>
</body>

结合事件监听器的第五种提交方式

第五种方式：结合button按钮与JavaScript事件监听器实现提交。具体实现见下方代码示例，通过获取按钮元素并绑定onclick事件，在事件中调用验证函数及表单提交方法。


<body>
  <form action="https://www.jb51.net" id="myForm">
  
  <input type="text"/>
  <input type="button" value="submitBtn" id="myBtn"/>
  
  </form>
 </body>
 
  <script type="text/javascript">
  
   function validate() {
      if (confirm("提交表单?")) {
        return true;
      } else {
        return false;
      }
}

第五种方式的具体实现中，使用type为button的按钮，通过onclick="submitForm();"触发提交。如前所述，这会忽略form标签中的onsubmit属性。为了进行必要的表单验证，验证代码应放置在submitForm()方法中执行。若验证通过，则调用document.getElementByIdx_x("myForm").submit()手动提交表单。


function submitForm() {
      if (validate()) {
        document.getElementByIdx_x("myForm").submit();
      }
   }
  
   document.getElementByIdx_x("myBtn").onclick = submitForm;
</script>

以上介绍了利用JavaScript进行表单提交的几种常用方法及其验证机制。这些方法各有适用场景，开发者可根据具体需求选择合适的方式，并注意不同浏览器对事件处理的差异。希望这些内容能为您提供参考，欢迎继续支持相关技术分享。

JavaScript实现表单提交的五种方式及验证机制详解