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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">
   function validate(obj) {
    if (confirm("提交表单?")) {
      alert(obj.value);
      return true;
    } else {
      alert(obj.value);
      return false;
    }
   }
 </script>
 <body>
  <form action="http://www.jb51.net" 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();方法中进行验证。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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="http://www.jb51.net" id="myForm">
   
    <input type="text"/>
    <input type="button" value="submitBtn" onclick="submitForm();"/> <!—也可以使用document.getElementByIdx_x(“该按钮的id”).click();来执行onclick事件-->
   
  </form>
</body>

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

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

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

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

第五种方式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
  <form action="http://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;
      }
}

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

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

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

利用JS提交表单的几种方法和验证(必看篇)的更多相关文章

  1. 利用JS提交表单的几种方法和验证

    第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 <script type="text/javascript"> function ...

  2. 使用JS对form的内容验证失败后阻止提交 &&js校验表单后提交表单的三种方法总结

    1.form的两个事件 submit,提交表单,如果直接调用该函数,则直接提交表单 onSubmit,提交按钮点击时先触发,然后触发submit事件.如果不加控制的话,默认返回true,因此表单总能提 ...

  3. Mvc 提交表单的4种方法全程详解

    一,MVC  HtmlHelper方法 Html.BeginForm(actionName,controllerName,method,htmlAttributes){} BeginRouteForm ...

  4. Mvc 提交表单的4种方法

     一,MVC  HtmlHelper方法 1.     Html.BeginForm(actionName,controllerName,method,htmlAttributes){} 2.     ...

  5. JSP提交表单的几种方法

    1.通过<form action="url"><input type="submit"></form>按钮方式提交 这种方式 ...

  6. spring mvc 防止重复提交表单的两种方法，推荐第二种

    第一种方法:判断session中保存的token 比较麻烦,每次在提交表单时都必须传入上次的token.而且当一个页面使用ajax时,多个表单提交就会有问题. 注解Token代码: package c ...

  7. js校验表单后提交表单的三种方法总结

    第一种: 复制代码 代码如下: <script type="text/javascript">         function check(form) { if(fo ...

  8. js校验表单后提交表单的三种方法总结(转)

    第一种: 代码如下: <script type="text/javascript"> function check(form) { if(form.userId.val ...

  9. JS-校验表单后提交表单的三种方法总结

    第一种: <script type="text/javascript"> function check(form) { if(form.userId.value=='' ...

随机推荐

  1. C# Winform下一个热插拔的MIS/MRP/ERP框架11（启航）

    初学时,有了想法却完全不知道该从何下指,此序列将抛砖引玉,与大家共同学习进步. 一个程序的初始,必然是启动. 我的要求: 1.应用程序保持单例: 2.从配置文件加载一些基础数据进行初始化: 3.显示软 ...

  2. bzoj 3864: Hero meet devil（dp套dp）

    题面 给你一个只由\(AGCT\)组成的字符串\(S (|S| ≤ 15)\),对于每个\(0 ≤ .. ≤ |S|\),问 有多少个只由\(AGCT\)组成的长度为\(m(1 ≤ m ≤ 1000) ...

  3. samba服务器架设

    #samba服务器架设方便线上linux服务器和windows服务器之间共享 1.关闭防火墙service iptables stop 2.关闭SELinuxsetenforce 0 3.安装samb ...

  4. CF886E Maximum Element

    $ \color{#0066ff}{ 题目描述 }$ 从前有一个叫Petya的神仙,嫌自己的序列求max太慢了,于是将序列求max的代码改成了下面这个样子: int fast_max(int n,in ...

  5. Tensorflow博文列表

    tensorflow:https://wenku.baidu.com/view/489ecc9727fff705cc1755270722192e44365853.html 语义分割SegNet:htt ...

  6. Freeman链码

    [简介] 链码(又称为freeman码)是用曲线起始点的坐标和边界点方向代码来描述曲线或边界的方法,常被用来在图像处理.计算机图形学.模式识别等领域中表示曲线和区域边界.它是一种边界的编码表示法,用边 ...

  7. (WIN7)delphi7运行关闭出现cannot creat file"C:\program file\borland\delphi7\bin\initcc32.exe拒绝访问

    1. 程序右键,以管理权限运行.2. 将Delphi7目录只读取消.WIN7以上的操作系统正常运行程序不是以管理员方式运行的

  8. [CQOI2007]涂色 BZOJ 1260 区间dp

    题目描述 假设你有一条长度为5的木版,初始时没有涂过任何颜色.你希望把它的5个单位长度分别涂上红.绿.蓝.绿.红色,用一个长度为5的字符串表示这个目标:RGBGR. 每次你可以把一段连续的木版涂成一个 ...

  9. JAVA数据结构--LinkedList双向链表

    链表是一种物理存储单元上非连续.非顺序的存储结构,数据元素的逻辑顺序是通过链表中的指针链接次序实现的.链表由一系列结点(链表中每一个元素称为结点)组成,结点可以在运行时动态生成.每个结点包括两个部分: ...

  10. JSTL的核心标签

    JSTL的核心标签: .if: 语法:<c:if test="" var="" scope=""></c:if> 当 ...