form表单中的onSubmit

今天看一个代码，突然发现了一个form表单中的onSubmit，估计是好久都没有写前端表单提交了，突然忘了，赶紧到网上查了查。

原文地址：https://www.cnblogs.com/ahudyan-forever/p/5795463.html

onsubmit只能表单上使用,提交表单前会触发, onclick是按钮等控件使用, 用来触发点击事件。

在提交表单前，一般都会进行数据验证，可以选择在submit按钮上的onclick中验证,也可以在onsubmit中验证。

但是onclick比onsubmit更早的被触发。

　　提交过程

1、用户点击按钮 —->

2、触发onclick事件 —->

3、onclick返回true或未处理onclick —->

4、触发onsubmit事件 —->

5、onsubmit未处理或返回true ——>

6、提交表单.

 onsubmit处理函数返回false，onclick函数返回false，都不会引起表单提交。

第一种：onsubmit

<script language="javascript">function CheckPost (){if (addForm.user.value == ""){alert("请填写用户名！");addForm.username.focus();return false;}if (addForm.title.value.length < 5){alert("标题不能少于5个字符！");addForm.title.focus();return false;}return true;}
</script><form action="test.php" method="post" name="addForm"  onsubmit="return CheckPost();"><div>用户:<input type="text" size="10" name="user" maxlength="20"/></div><div>标题:<input type="text" name="title" maxlength="50"/></div><div>内容:<textarea name="content" rows="8" cols="30"></textarea></div><div><input type="submit" name="submit" value="发表留言"/></div>
</form>

第二种：onclick

 1 <script language="javascript">2     function SendForm () 3     {4         if(CheckPost()) 5         {6             document.addForm.submit();7         }8     }9
10     function CheckPost ()
11     {12          if (addForm.user.value == "")
13          {
14                alert("请填写用户名！");
15                addForm.username.focus();
16                return false;
17          }
18          if (addForm.title.value.length < 5)
19          {
20                alert("标题不能少于5个字符！");
21                addForm.title.focus();
22                return false;
23          }
24          return true;
25     }
26 </script>
27
28 <form action="test.php" method="post" name="addForm">
29      <div>用户:<input type="text" size="10" name="user" maxlength="20"/></div>
30      <div>标题:<input type="text" name="title" maxlength="50"/></div>
31      <div>内容:<textarea name="content" rows="8" cols="30"></textarea></div>
32      <div><input type="button" name="submit" value="发表留言" onclick="SendForm();"/></div>
33 </form>

form表单中的onSubmit相关推荐

form表单中根据值判断是否disabled_Java 0基础入门（Html表单、表单元素）
上一篇:Java 0基础入门 (Html标签的使用) 表单在网页中主要负责数据采集功能. 一.表单实际应用场景百度搜索 5173注册如上两张图,图中的黑色线条是我画上去的,如果按照黑线,在Excl ...
关于继承BaseServlet后为什么form表单中必须加上method=“post”
关于继承BaseServlet后为什么form表单中必须加上method="post" 学习Servlet中一直有个困惑,在提交form表单时我action ...
在form表单中添加一个隐藏的reset按钮，
//在form表单中添加一个隐藏的reset按钮, <input type="reset" style="display:none;" /> //然 ...
php表单数据类型,form表单中enctype属性的三种类型
1.form表单中enctype属性的三种类型 form表单中enctype属性可以用来控制对表单数据的发送前的如何进行编码,enctype有三种,分别为: multipart/form-data不对 ...
html表单提交按钮代码,JavaScript在form表单中使用button按钮实现submit提交方法
submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上. ...
form表单中的enctype属性
form表单中的enctype属性 enctype就是encodetype就是编码类型的意思. multipart/form-data是指表单数据中由多部分构成,既有文本数据,又有文件等二进制数据 ...
php中enctype属性,PHP_关于form表单中Enctype属性的用法，关于Form表单中Enctype属性的用 - phpStudy...
关于form表单中Enctype属性的用法关于Form表单中Enctype属性的用法: form表单中的Enctype属性指定将数据发回到服务器时浏览器使用的编码类型. 下面是它的取值说明: mul ...
form表单中的action属性
form表单中的action属性的值是表单提交给的url,如果我们没有设置action属性,那么默认的表单还是提交给当前页面 <form action = "register" ...
form表单中onclick事件和onsubmit事件的执行顺序
说来很惭愧,今天因为form表单的一个小问题困扰了一下午.虽然最终得以解决,但花费的时间实在是令人汗颜,现在总结一下遇到的问题. 先说一下背景,之前帮一个朋友的项目写了一个原生js的表单验证,今天突然 ...

form表单中的onSubmit

form表单中的onSubmit相关推荐

最新文章

热门文章