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 & ...
随机推荐
- 原生js遍历每一个对象,给每一个对象添加onclick事件
<script type="text/javascript"> window.onload = function () { var imgs = document.im ...
- Linux操作命令(七)
本次实验将介绍 Linux 命令中 cut.paste 和 tr 命令的用法. cut paste tr 1.cut cut命令是一个将文本按列进行切分的小工具,他可以指定分隔每列的定界符. 如果一行 ...
- 下载好的AE模板怎么用
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha 下载好的AE模板怎么用_百度经验
- Minimum Height Trees -- LeetCode
For a undirected graph with tree characteristics, we can choose any node as the root. The result gra ...
- BZOJ 3790 神奇项链(manacher+DP+树状数组)
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3790 [题目大意] 问最少用几个回文串可以构成给出串,重叠部分可以合并 [题解] 我们 ...
- BZOJ 3343:教主的魔法(分块)
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3343 [题目大意] 给出一个数列,有区间加法操作,询问区间大于等于c的数字个数 [题解 ...
- BZOJ 1116 [POI2008]CLO(并查集)
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1116 [题目大意] Byteotia城市有n个towns,m条双向roads.每条ro ...
- 【Manacher算法】poj3974 Palindrome
Manacher算法教程:http://blog.csdn.net/ggggiqnypgjg/article/details/6645824 模板题,Code 附带注释: #include<cs ...
- js 封装的自动创建表格的相关操作
因为要做一个动态输入的表格,现在积累一下资料,在网上找了一些资料,经过总结是使用更加方便些,谁有更好的插件和封装的东西,请大家分享一下. <script type="text/java ...
- #iOS问题记录# UIWebView滑动到底部
最近看Tmall的iOS APP,在Tmall的商品简介页面,当拖动到最底部时,会提示继续向上拖动,“查看图文详情”: 觉得这个设计挺好的.闲来无事,自己UIWebView模仿一下,问题是检查UIWe ...