您现在的位置： 365建站网 > 365文章 > JS(javascript)提交表单的方法和验证

JS(javascript)提交表单的方法和验证

文章来源：365jz.com     点击数：379    更新时间：2017-08-17 08:53   参与评论

工作中发现表单提交方便的问题，很多时候IE下提交好好的，打了火狐下就出现了问题，利用提交按钮就不成功了，于是利用JS的方式就成功了，也不知道为什么。在导师的催促下就总结出以下的几种常用表单提交的方法。

第一种方式：表单提交，在form标签中增加onsubmit事件来判断表单提交是否成功

</>code
  1. <script type="text/javascript">
  2.    function validate(obj) {
  3.     if (confirm("提交表单?")) {
  4.       alert(obj.value);
  5.       return true;
  6.     } else {
  7.       alert(obj.value);
  8.       return false;
  9.     }
  10.    }
  11.  </script>
  12.  <body>
  13.   <form action="https://www.365jz.com" onsubmit="return validate(document.getElementByIdx_x('myText'));"> <!—参数的这种写法注意下-->
  14.   
  15.     <input type="text" id="myText"/>
  16.     <input type="submit" value="submit"/>
  17.   
  18.   </form>
  19. </body>

第二种方式：通过button按钮来触发表单提交事件onclick="submitForm();"，会忽略掉其他标签中的属性，比如form标签中的onsubmit属性就失效了。这时为了进行表单验证，可以将验证代码放在submitForm();方法中进行验证。

</>code
  1. <script type="text/javascript">
  2.    function validate() {
  3.     if (confirm("提交表单?")) {
  4.       return true;
  5.     } else {
  6.       return false;
  7.     }
  8.    }
  9.    
  10.    function submitForm() {
  11.     if (validate()) {
  12.       document.getElementByIdx_x("myForm").submit();
  13.     }
  14.    }
  15.  </script>
  16.  <body>
  17.   <form action="https://www.365jz.com" id="myForm">
  18.   
  19.     <input type="text"/>
  20.     <input type="button" value="submitBtn" onclick="submitForm();"/> <!—也可以使用document.getElementByIdx_x(“该按钮的id”).click();来执行onclick事件-->
  21.   
  22.   </form>
  23. </body>

第三种方式：将onsubmit事件放在submit标签中，而不是form标签中，此时表单验证失效，点击提交按钮表单直接提交

</>code
  1. <script type="text/javascript">
  2.    function validate() {
  3.     if (confirm("提交表单?")) {
  4.       return true;
  5.     } else {
  6.       return false;
  7.     }
  8.    }
  9.  </script>
  10.  <body>
  11.   <form action="https://www.365jz.com">
  12.   
  13.     <input type="text"/>
  14.     <input type="submit" value="submit" onsubmit="return validate()"/>
  15.   
  16.   </form>
  17. </body>

第四种方式：为submit按钮添加上onclick事件，其中该事件用于表单提交的验证，功能类似于在form标签中增加了onsubmit事件一样

</>code
  1. <script type="text/javascript">
  2.    function validate() {
  3.     if (confirm("提交表单?")) {
  4.       return true;
  5.     } else {
  6.       return false;
  7.     }
  8.    }
  9.  </script>
  10.  <body>
  11.   <form action="https://www.365jz.com">
  12.   
  13.     <input type="text"/>
  14.     <input type="submit" value="submit" onclick="return validate()"/>
  15.   
  16.   </form>
  17. </body>

第五种方式：

</>code
  1. <body>
  2.   <form action="https://www.365jz.com" id="myForm">
  3.   
  4.   <input type="text"/>
  5.   <input type="button" value="submitBtn" id="myBtn"/>
  6.   
  7.   </form>
  8.  </body>
  9.  
  10.   <script type="text/javascript">
  11.   
  12.    function validate() {
  13.       if (confirm("提交表单?")) {
  14.         return true;
  15.       } else {
  16.         return false;
  17.       }
  18. }

通过button按钮来触发表单提交事件onclick="submitForm();"，会忽略掉其他标签中的属性，比如form标签中的onsubmit属性就失效了。这时为了进行表单验证，可以将验证代码放在submitForm();方法中进行验证

</>code
  1. function submitForm() {
  2.       if (validate()) {
  3.         document.getElementByIdx_x("myForm").submit();
  4.       }
  5.    }
  6.   
  7.    document.getElementByIdx_x("myBtn").onclick = submitForm;
  8. </script>

以上这篇利用JS提交表单的几种方法和验证(必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持365建站网。

如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛

您可能感兴趣的文章:

发表评论 (379人查看，0条评论)
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
昵称：
最新评论
------分隔线----------------------------
大家感兴趣的内容
最近更新的内容

公司信息

· 网站介绍
· 联系我们
· 加入我们
· 服务条款

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间：9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号