js 在表单提交前进行操作
最近在写页面的时候,需要手动写一些在表单进行提交前的验证操作,正好看到了2种阻止表单提交的方法,可以进行一些逻辑处理
方法一:使用return false
原生js写法:
<form id="loginForm" name="loginForm" action="login.aspx" method="post">
<button type="submit" value="Submit" id="submit">Submit</button>
</form> <script>
var submitBtn = document.getElementById("submit"); submitBtn.onclick = function (event) {
alert("preventDefault!");
return false;
};
</script> jquery写法:
<script>
$("#loginForm").submit(function(){
if(条件){
//此处这里进行逻辑处理
}else{
return false;
}
})
</script> //这里发现的一个问题就是,在用jq写法的时候,只要不返回false,逻辑处理完也会自动提交表单
方法二:使用preventDefault()
<form name="loginForm" action="login.aspx" method="post">
<button type="submit" value="Submit" id="submit">Submit</button>
</form> <script>
var submitBtn = document.getElementById("submit"); submitBtn.onclick = function (event) {
alert("preventDefault!");
var event = event || window.event;
event.preventDefault(); // 兼容标准浏览器
window.event.returnValue = false; // 兼容IE6~8
};
</script>
js 在表单提交前进行操作的更多相关文章
- springmvc下js控制表单提交(表单提交前检验,提交后获取json返回值)
这个问题我搞了四天,终于搞懂.因为对js很不熟悉.郁闷的是后台代码出错总可以设置断点调试,前端js代码出错只能通过浏览器提供一些运行数据来分析,很不习惯. 首先说下逻辑:这是一个注册功能,我希望,注册 ...
- a标签指定的url,在表单提交前进行js验证的实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- javascprit form表单提交前验证以及ajax返回json
1.今天要做一个手机验证码验证的功能.需求是前端页面点击发送 短信验证码,后台接收后通过ajax返回到前端,之后前端在提交时候进行验证.思路很简单,不过做的过程还是学到不少的东西. 1.ajax请求后 ...
- form的onsubmit事件--表单提交前的验证最佳实现方式
今天遇到了一个问题,页面中include了很多的公共页面(都是没有form的),并且里面好多的地方都是自行提交的(页面中加入一个type=“submit”域,然后js中写入sumbit.click来执 ...
- jquery.form.js 让表单提交更优雅
jquery.form.js 让表单提交更优雅.可以页面不刷新提交表单,比jQuery的ajax提交要功能强大. 1.引入 <script src="/src/jquery-1.9.1 ...
- 利用JS 阻止表单提交
情景一:不存在Ajax异步操作 1 使用背景:会议室预定管理系统中,当表单提交的时候需要验证预约的时间是否符合预定规则(不需要通过访问服务器),否则提示错误信息,阻止表单提交. 2 相关技术点: fo ...
- 【转载】[JS]让表单提交返回后保持在原来提交的位置上
有时候,在网页中点击了页面中的按钮或是刷新了页面后,页面滚动条又 会回到顶部,想看后面的记录就又要拖动滚动条,或者要按翻页键,非常不方便,想在提交页面或者在页面刷新的时候仍然保持滚动条的位置不变,最好 ...
- js阻止表单提交
<!DOCTYPE html><html><head> <title>Simple Login Form</title> < ...
- Html form 表单提交前验证
可以使用form表单的onsubmit方法,在提交表单之前,对表单或者网页中的数据进行检验. onsubmit指定的方法返回true,则提交数据:返回false不提交数据. 直接看下面的代码: 1 & ...
随机推荐
- 微信小程序 - 时间进度条功能
关于答题类,或者一些游戏环节的小程序需要用到时间进度条,改功能怎么实现看下面源码 <view class='out' style='margin-top:10px'> <view c ...
- Delphi使程序的窗口出现在最前面并激活
procedure setAppFront(); //使程序的窗口出现在最前面并激活 var pt, OldPt, NewPt: TPoint; begin //判断Application是否最小化, ...
- window 下 nginx+php+fastcgi 架设备忘
1.配置Php.ini 1)extension_dir = "./ext" 修改这个路径为真实的php的ext路径 2);extension=php_mysql.dll ;exte ...
- python正则的中文处理(转)
匹配中文时,正则表达式规则和目标字串的编码格式必须相同 print sys.getdefaultencoding() text =u"#who#helloworld#a中文x#" ...
- (4) go 运算符
1. (1) 整数相除,结果是小数,会舍去小数部分 (2) 使用自增自减时, ++ -- 必须单独一行 (3)只有后 a++,没有前 ++a 2. 3. 4. 5 6. 7. 8.
- Windows下的cd命令
http://blog.sina.com.cn/s/blog_5e971b850100rtta.html 首先先了解下什么是驱动器,什么是盘符. 驱动器是指通过系统格式化并带有一个驱动器号的存储区域, ...
- vijos1889:天真的因数分解
题目链接 vijos1889:天真的因数分解 题解 同bzoj2440: [中山市选2011]完全平方数 就是改成了求有平方因子数,依旧考虑二分,只是把容斥系数取一下相反数,也就是把莫比乌斯函数求一个 ...
- JZYZOJ1454 NOIP2015 D2T3_运输计划 二分 差分数组 lca tarjan 树链剖分
http://172.20.6.3/Problem_Show.asp?id=1454 从这道题我充分认识到我的脑子里好多水orz. 如果知道了这个要用二分和差分写,就没什么思考上的难点了(屁咧你写了一 ...
- JZYZOJ1445 [noip2014day1-T3]飞扬的小鸟 动态规划 完全背包
http://172.20.6.3/Problem_Show.asp?id=1445 很容易看出来动态规划的本质,但是之前写的时候被卡了一下(不止一下),还是写一下题解. 直接暴力O(n*m^2)大概 ...
- js流程控制与函数
流程控制 1.条件语句 分支结构 单向分支 if (条件表达式){ code... } 双向分支 if (条件表达式){ code... }else{ code... } 多向分支 if (条件表达式 ...