利用JS提交表单的几种方法和验证(必看篇)


Posted in Javascript onSeptember 17, 2016

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

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

<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://3water.com" onsubmit="return validate(document.getElementByIdx_x('myText'));"> <!—参数的这种写法注意下-->
  
    <input type="text" id="myText"/>
    <input type="submit" value="submit"/>
  
  </form>
</body>

第二种方式:通过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://3water.com" id="myForm">
  
    <input type="text"/>
    <input type="button" value="submitBtn" onclick="submitForm();"/> <!—也可以使用document.getElementByIdx_x(“该按钮的id”).click();来执行onclick事件-->
  
  </form>
</body>

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

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

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

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

第五种方式:

<body>
  <form action="https://3water.com" 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;
      }
}

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

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

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

Javascript 相关文章推荐
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
Apr 15 Javascript
JavaScript游戏之是男人就下100层代码打包
Nov 08 Javascript
查找Oracle高消耗语句的方法
Mar 22 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
AngularJS自定义指令之复制指令实现方法
May 18 Javascript
Vue computed计算属性的使用方法
Jul 14 Javascript
浅谈JavaScript find 方法不支持IE的问题
Sep 28 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 Javascript
jQuery中常用动画效果函数(日常整理)
Sep 17 #Javascript
js方法数据验证的简单实例
Sep 17 #Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 #Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
Sep 17 #Javascript
最全面的JS倒计时代码
Sep 17 #Javascript
jQuery检查元素存在性(推荐)
Sep 17 #Javascript
用jquery获取自定义的标签属性的值简单实例
Sep 17 #Javascript
You might like
让PHP以ROOT权限执行系统命令的方法
2011/02/10 PHP
php强制下载类型的实现代码
2011/04/21 PHP
php编程每天必学之表单验证
2016/03/01 PHP
js 图片轮播(5张图片)
2008/12/30 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
原生Js实现简易烟花爆炸效果的方法
2015/03/20 Javascript
JavaScript forEach()遍历函数使用及介绍
2015/07/08 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
Python写的服务监控程序实例
2015/01/31 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
python3实现随机数
2018/06/25 Python
Django添加sitemap的方法示例
2018/08/06 Python
pycharm新建一个python工程步骤
2019/07/16 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
总经理助理工作职责
2014/02/06 职场文书
税务会计岗位职责
2014/02/18 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
任命书怎么写
2015/03/02 职场文书
听证通知书
2015/04/24 职场文书
2016年清明节期间群众祭祀活动工作总结
2016/04/01 职场文书
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers
SQL Server删除表中的重复数据
2022/05/25 SQL Server
SpringBoot详解执行过程
2022/07/15 Java/Android