第一种方式：表单提交，在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. maven项目运行找不到类的错误

    Maven项目 eclipse工具 错误: [INFO] -------------------------------------------------------------[ERROR] CO ...

  2. java 读取excel 2007 .xlsx文件 poi实现

    工作需要读取excel里面的行内容,使用java实现较为简单. 在最开始,尝试使用 jxl-2.6.12 来实现读取excel 的行内容.但是按照网上的方法,程序根本无法正确处理文件流.经过谷姐的一番 ...

  3. JS 函数的基本练习

    // - 求3个数中的最大值 function biJiao3(x, y, z) { return x > y ? (x > z ? x : z) : (y > z ? y : z) ...

  4. PHP批量给目录下所有的文件转换编码

    代码如下: function tree(&$arr_file, $directory, $dir_name=''){            $mydir = dir($directory);  ...

  5. sed的基本用法

    了解sed的基本参数 sed匹配的方法: '//'p, 此符号与grep的引号类似,但sed是一定加此符号的,且还要加上-n的参数,匹配起来相当麻烦.sed匹配的方法: '//'pI 加上I的参数是指 ...

  6. Qt 学习之路 2（64）：使用 QJsonDocument 处理 JSON

    Home / Qt 学习之路 2 / Qt 学习之路 2(64):使用 QJsonDocument 处理 JSON Qt 学习之路 2(64):使用 QJsonDocument 处理 JSON  豆子 ...

  7. 012 Android Palette颜色选择器的使用

    1.页面总体使用线性布局(LinearLayout) 2.将Toolbar(顶部菜单栏)拖入design模式下的设计界面中 3.颜色选择器需要在build.gradle中手动的添加 compile ' ...

  8. Angular 组件 mat-paginator 自定义详细用法

    Demo: https://stackblitz.com/edit/angular-5mgfxh?file=main.ts 官方文档: https://material.angular.io/comp ...

  9. 动态规划 70.climbing Stairs

    1. 记忆化搜索 - 自上向下的解决问题:使用vector来保存每次计算的结果,如果下次再碰到同样的需要计算的式子就不需要重复计算了. 2. 动态规划 - 自下向上的解决问题 解法一:自顶向下 解法二 ...

  10. WAMP下Apache配置Vhost (2

    发布网站添加虚拟机"/usr/local/apache/conf/extra/httpd-vhost.conf"的最下面: <VirtualHost *:80> Ser ...