浅谈 form 表单提交
原创文章,转载请注明出处: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 表单提交的更多相关文章
- Form表单提交数据的几种方式
一.submit提交 在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type='submit'>)就可以进行数据的提交, ...
- jQuery Form 表单提交插件-----formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的 应用
一.jQuery Form的其他api 1. formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...
- jQuery Form 表单提交插件----Form 简介,官方文档,官方下载地址
一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...
- Checkbox框全选操作,form表单提交与jquery ajax提交两种处理方式
//1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $(" ...
- form表单提交
1.form表单提交.html页面失败 <%--客户端form--%> <form id="form2" action="LoginOne.html&q ...
- ajax form表单提交 input file中的文件
ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...
- 2017-01-11小程序form表单提交
小程序form表单提交 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局.事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但 ...
- SpringMVC中使用bean来接收form表单提交的参数时的注意点
这是前辈们对于SpringMVC接收表单数据记录下来的总结经验: SpringMVC接收页面表单参数 springmvc请求参数获取的几种方法 下面是我自己在使用时发现的,前辈们没有记录的细节和注意点 ...
- Form表单提交,Ajax请求,$http请求的区别
做过前端同学想必都避免不了要和后台server打交道.而以下这三种与后台交互的方式想必大家都不陌生. Form表单提交,Ajax请求,Angular的$http请求 以前一直搞不清楚什么时候应该用哪种 ...
随机推荐
- 006 vue监控
一:监视 1.使用keyup <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- ISO/IEC 9899:2011 条款6.10.1——条件包含
6.10.1 条件包含 约束 1.控制条件包含的表达式应该是一个整数常量表达式,除了:标识符(包括那些词法上与关键字相同的)被解析为以下所描述的:[注:因为控制常量表达式在翻译阶段4期间被计算,所以所 ...
- C语言 运算符优先级
规律小结: 结合方向只有三个是从右往左,其余都是从左往右. 所有双目运算符中只有赋值运算符的结合方向是从右往左. 另外两个从右往左结合的运算符也很好记,因为它们很特殊:一个是单目运算符,一个是三目运算 ...
- 用Python实现的Internet电话软件(P2P-SIP)<开源>
本博客为本人学习笔记,代码出自GitHub:https://github.com/theintencity/p2p-sip 由于GitHub原著为英文,且相当的啰嗦,本文为翻译内容并去除其啰嗦的部分 ...
- 元数据Meta
元数据,指的是“除了字段外的所有内容”,例如排序方式.数据库表名.人类可读的单数或者复数名等等.所有的这些都是非必须的,甚至元数据本身对模型也是非必须的. 在模型中增加元数据,需要在模型类中添加一个子 ...
- OpenGL基础汇总
OpenGL(应用程序接口 即API)——用于访问图形硬件的可编程特性 1. 各种矩阵: 世界矩阵(World Matrix):世界矩阵确定一个统一的世界坐标,用于组织独立的物体形成一个完整的场景; ...
- 映美FP-530K+打印发票的各种经验
本人虽然写了很多lodop博文,但是程序开发一般都是用虚拟打印机测试,实际打印机打印中还可能存在各种问题,毕竟理论都不如实践能获得更多的打印经验.当个人使用过的打印机不多,只有映美FP-530K+,用 ...
- 又一神器框架:linq.js
1.支持jQuery插件的方式.jquery.linq.min.js. 2.也可以像普通js方法一样使用.linq.min.js. 3.当然用习惯VS的童鞋肯定希望有个良好的智能感知,是的,它支持. ...
- [LeetCode] 656. Coin Path 硬币路径
Given an array A (index starts at 1) consisting of N integers: A1, A2, ..., AN and an integer B. The ...
- linux grep的用法
linux grep的用法<pre>[root@iZ23uewresmZ ~]# cat /home/ceshis.txtb124230 b034325 a081016 m7187998 ...