原创文章,转载请注明出处:http://www.cnblogs.com/weix-l/p/7675230.html

  若有错误,请评论指出,谢谢!

  Form 对象代表一个 HTML 表单。在 HTML 文档中 <form> 每出现一次,就会有一个Form 对象被创建。

  首先,看Form自身的事件句柄属性。Form对象本身提供两个JavaScript事件句柄属性:onreset() 和 onsubmit(),前者可用于重置form表单中的数据,后者在试图提交表单时调用。可以给onsubmit属性指定JavaScript语句或函数用于在提交时执行。比如,一个简单的测试,使用input标签在提交表单时弹出提示“表单提交...”,则为:

<form action="/" onsubmit="alert('表单提交...')">
<input type="submit" value="提交">
</form>

这条语句除了让浏览器弹出一个提示框外没有其他作用,但它验证了Form对象的onsubmit 句柄属性。可以给onsubmit属性指定提交事件触发时需要执行的函数,比如,登录时指定一个名为login的函数:

<form action="/" onsubmit="login();">
<input type="submit" value="提交">
</form>

这样,在点击“提交”按钮时会触发“表单提交”事件,并执行login函数。一种通常的做法是给onsubmit句柄属性中添加带有return语句的JavaScript函数来判断“表单提交”事件是否被执行,这是句柄属性的特性,如果句柄的值为false,则该句柄事件不会被执行,对onsubmit句柄来说,“如果 onsubmit 句柄返回 fasle,表单的元素就不会提交”。这样,就可以在login函数中指定在什么情况下函数返回true,即什么情况下才能提交表单:

<form action="/" onsubmit="return login();">
<input type="submit" value="提交">
</form>

login函数的逻辑直接决定该表单是否会被提交。如果再扩充表单内容,在其中添加文本框和密码框:

<form action="/" onsubmit="return login();">
用户名:<input type="text" id="uname">
密码:<input type="password" id="upass">
<input type="submit" value="submit">
</form>

逻辑为指定当用户名或密码有一个为空的时候不能提交表单,则在login函数中可以这样写:

<script>
function login(){
var uname = document.getElementById("uname").value;
var upass = document.getElementById("upass").value; if(uname == "" || upass == ""){
return false;
} else {
return true;
}
}
</script>

  onsubmit句柄一个很大的作用就是可以在初始刷新页面或按下回车键的时候“阻止表单自动提交”,因为每次提交前都会去调用句柄去判断,如果逻辑判断返回false,则不会提交。

  此外,Form对象还提供有submit()方法用于提交数据,但是,当submit()方法被执行时,Form的onsubmit事件句柄不会被调用。如何来验证该方法呢?可以通过其另一个onclick句柄添加函数间接实现。比如,form元素的onsubmit句柄函数为login_1(),类型为button的input元素的onclick句柄函数为login_2(),login_1()函数返回false,login_2函数中获取form元素DOM,并调用其submit()方法。代码如下,查看表单是否会被提交:


<form action="/" onsubmit="return login_1();" id="login">
<input type="button" value="submit" onclick="return login_2()">
</form>

<script>
function login_1(){
return true;
}
function login_2(){
var frm = document.getElementById("login");
frm.submit();
}
</script>

结果显示,form表单仍然会被提交,这说明form的onsubmit句柄没有起作用,即login_1()函数没有被调用。

浅谈 form 表单提交的更多相关文章

  1. Form表单提交数据的几种方式

    一.submit提交 在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type='submit'>)就可以进行数据的提交, ...

  2. jQuery Form 表单提交插件-----formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的 应用

    一.jQuery Form的其他api  1.  formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...

  3. jQuery Form 表单提交插件----Form 简介,官方文档,官方下载地址

     一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...

  4. Checkbox框全选操作,form表单提交与jquery ajax提交两种处理方式

    //1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $(" ...

  5. form表单提交

    1.form表单提交.html页面失败 <%--客户端form--%> <form id="form2" action="LoginOne.html&q ...

  6. ajax form表单提交 input file中的文件

    ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...

  7. 2017-01-11小程序form表单提交

    小程序form表单提交 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局.事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但 ...

  8. SpringMVC中使用bean来接收form表单提交的参数时的注意点

    这是前辈们对于SpringMVC接收表单数据记录下来的总结经验: SpringMVC接收页面表单参数 springmvc请求参数获取的几种方法 下面是我自己在使用时发现的,前辈们没有记录的细节和注意点 ...

  9. Form表单提交,Ajax请求,$http请求的区别

    做过前端同学想必都避免不了要和后台server打交道.而以下这三种与后台交互的方式想必大家都不陌生. Form表单提交,Ajax请求,Angular的$http请求 以前一直搞不清楚什么时候应该用哪种 ...

随机推荐

  1. 用SC命令 添加或删除windows服务提示OpenSCManager 失败5

    在安装命令行中安装  windowsOpenSCManager 失败5  的错误,原因是当前用户的权限不足,需要做的是在注册表 HKEY_LOCAL_MACHINE\Software\Microsof ...

  2. UBI mkfs.ubifs 参数记录

    NAND 硬件结构如下: 脚本如下 sudo mkfs.ubifs -q -r rootfs_iproute -m 4096 -e 248KiB -c 3840 -o ubifs.img -F ech ...

  3. 腾讯云短信 nodejs 接入, 通过验证码修改手机示例

    腾讯云短信 nodejs 接入, 通过验证码修改手机示例 参考:腾讯云短信文档国内短信快速入门qcloudsms Node.js SDK文档中心>短信>错误码 nodejs sdk 使用示 ...

  4. 接口测试01- Jmeter-线程进程-环境变量

    1.1 概念 JMeter 是 Apache 组织使用 Java 开发的一款测试工具 ,它最初被设计用于Web应用测试,但后来扩展到其他测试领域. 它可以用于测试静态和动态资源,例如静态文件.Java ...

  5. easyui datagrid 中序列化后的日期格式化

    1.在easyui datagrid 中序列化后的日期显示为:/Date(1433377800000)/ 2.格式化后的显示为: 2015-06-04 08:30:00 3.使用代码如下: 3.1. ...

  6. Linux开机报错,提示根目录有错误,无法通过检测进入系统

    报错信息如下: VolGroup-lv_root contains a file system with errors, check forced. 修复方法:(因为我的是虚拟机,可以随意做备份,所以 ...

  7. 大网扫描在发现APT组织方面的一个应用

    如何发现CobalStike服务端? 答: 扫HTTP response header: "HTTP/1.1 404 Not Found" balaba-"Server& ...

  8. 使用Centos7.5+Nginx+Gunicorn+Django+Python3部署blog项目

    项目开发环境是 Python3.5.2+Django1.10.6+Sqlite3+Centos7.5+Nginx1.12.2+Gunicorn 发布出来供需要的同学借鉴参考.文中如有错误请多多指正! ...

  9. python is 和 == 区别(8)

    在python中is和==都说常用的运算符之一,主要用于检测两个变量是否相等,返回True或者False,具体区别在哪呢? 一.前言 在讲解is和==区别直接先讲解一下内置函数id(),其实在文章 p ...

  10. 【剑指offer】面试题 8. 二叉树的下一个结点

    面试题 8. 二叉树的下一个结点 NowCoder 题目描述 给定一棵二叉树和其中的一个结点,如何找出中序遍历顺序的下一个结点?树中的结点除了有两个分别指向左右子结点的指针以外,还有一个指向父结点的指 ...