利用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 相关文章推荐
JS面向对象、prototype、call()、apply()
May 14 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
Apr 09 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
javascript控制层显示或隐藏的方法
Jul 22 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 Javascript
原生JS实现图片轮播效果
Dec 26 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
微信小程序webview 脚手架使用详解
Jul 22 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 Javascript
vue通过过滤器实现数据格式化
Jul 20 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
thinkphp连贯操作实例分析
2014/11/22 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
限制文本框输入N个字符的js代码
2010/05/13 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
JavaScript浏览器对象之一Window对象详解
2016/06/03 Javascript
如何使用jquery实现文字上下滚动效果
2016/10/12 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
LayUI数据接口返回实体封装的例子
2019/09/12 Javascript
JavaScript实现拖拽功能
2020/02/11 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
Python发送Email方法实例
2014/08/21 Python
在Gnumeric下使用Python脚本操作表格的教程
2015/04/14 Python
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
浅谈tensorflow 中的图片读取和裁剪方式
2020/06/30 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
python进度条显示之tqmd模块
2020/08/22 Python
Css3实现无缝滚动防抖
2020/09/14 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
保密工作整改情况汇报
2014/11/06 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
vue引入Excel表格插件的方法
2021/04/28 Vue.js
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python
Python编解码问题及文本文件处理方法详解
2021/06/20 Python
java设计模式--建造者模式详解
2021/07/21 Java/Android
python3操作redis实现List列表实例
2021/08/04 Python