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

时间：2023-01-29 21:07:41

第一种方式：表单提交，在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的内容验证失败后阻止提交 &amp&semi;&amp&semi;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校验表单后提交表单的三种方法总结&lpar;转&rpar;

    第一种: 代码如下: <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. React&period;render和reactDom&period;render的区别

    刚开始学习react.js.发现网上的资料,有些是写着react.render,有些写着reactDom.render.觉得很奇怪就查阅了一下资料.解释如下: 这个是react最新版api,也就是0. ...

  2. Android5&period;0资源 colorAccent&comma;colorPrimary&comma;colorPrimaryDark

  3. uva 11986

    假设有n只老鼠 每只老鼠有两种状态 死或活 则n只老鼠有 2^n方种状态 所以n只老鼠可以确定2^n只瓶子 #include <cstdio> #include <cstdlib&g ...

  4. hdu 4937 Lucky Number

    虽然算法清晰的不能再清晰,但是实现总是边角料错这错那. 题目大意: 给出n,找出一些进制,使得n在该进制下仅为3,4,5,6表示 解题思路: 首先,4-10000进制直接枚举计算出每一位 此外,最多只 ...

  5. html Js跨域提交数据方法，跨域提交数据后台获取不到数据

    MVC实现方式:(后台获取不到方法请参考下面js) [ActionAllowOrigin][HttpPost]public JsonResult Cooperation() { return json ...

  6. jsp a标签传值到action中，action接收不到传值

    因为需求,今天在action中加了一个marker属性,尝试了很多方法 set,get方法也生成了,但是就接收不到值. 这时我注意到action中有我之前使用ajax请求数据返回json格式数据,不以 ...

  7. MATLAB中多行注释的三种方法

    MATLAB中多行注释的三种方法 A. %{ 若干语句 %} B. 多行注释: 选中要注释的若干语句, 编辑器菜单Text->Comment, 或者快捷键Ctrl+R 取消注释: 选中要取消注释 ...

  8. sql 学习笔记 p46

    交换行 update tab1 set c1=c2,c2=c1  .说明sql是临时表的存储,在查询出来的结果为决定前,可以随意操纵临时表中的列 update tab set c1=c1+(selec ...

  9. 在ubuntu14&period;04上部署hadoop2&period;6&period;3

    一.在Ubuntu下创建hadoop组和hadoop用户 增加hadoop用户组,同时在该组里增加hadoop用户,后续在涉及到hadoop操作时,我们使用该用户. 1.创建hadoop用户组 2.创 ...

  10. Tuxedo学习门户网站

    中间件简介: 介于客户机和server之间的夹层,突破了传统的c/s架构,为构建大规模,高性能.分布式c/s应用程序提供了通信.事物,安全.容错等基础服务,屏蔽了底层应用细节,应用程序不必从底层开发, ...

相关文章