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 & ...
随机推荐
- 【JBPM4】创建流程实例
示例代码: ProcessEngine processEngine = Configuration.getProcessEngine(); ExecutionService executionServ ...
- AC日记——红色的幻想乡 洛谷 P3801
红色的幻想乡 思路: 线段树+容斥原理: 代码: #include <bits/stdc++.h> using namespace std; #define maxn 100005 #de ...
- centos7系统安装后的基础优化
1.更改网卡信息 1.编辑网卡 # cd /etc/sysconfig/network-scripts/ # mv ifcfg-ens33 ifcfg-eth0 # mv ifcfg-ens37 if ...
- KMS使用CLion作为IDE来调试
KMS使用CLion作为IDE来调试,打开kms相应模块的目录,CLion自动识别相应的CMakeLists.txt. 然而会make失败,经搜索,看到Clion使用的自带的cmake,因此系统中安装 ...
- 计蒜客 A2232.程序设计:蒜厂年会-单调队列(双端队列(STL deque)实现)滑窗维护最小前缀和
程序设计:蒜厂年会 问答问题反馈 只看题面 16.79% 1000ms 262144K 在蒜厂年会上有一个抽奖,在一个环形的桌子上,有 nn 个纸团,每个纸团上写一个数字,表示你可以获得多少蒜币. ...
- HRBUST 1213 单词接龙
暴力搜索. 按照能配对的关系建立有向边,然后暴力搜索. #include<cstdio> #include<cstring> #include<cmath> #in ...
- 初识C#设计模式
利用设计模式可以使我们的代码更灵活,更容易扩展,更容易维护.各种面向对象的程序设计语言都提供了基本相同的机制:比如类.继承.派生.多态等等.但是又有各自的特色,C# 中的反射机制便是一个很重要的工具, ...
- [Codeforces #196] Tutorial
Link: Codeforces #196 传送门 A: 枚举 #include <bits/stdc++.h> using namespace std; #define X first ...
- 【计算几何】【二分】【随机增量法】hdu6167 Missile Interception
n个半径为R的圆是否有公共部分,等价于询问是否存在一个半径小于R的圆,能覆盖所有n个圆的圆心. 对这n个点求最小圆覆盖即可.从网上扒了个随机增量法的代码. 这样算上二分,复杂度就是nlogn了. #i ...
- 【动态规划】【斜率优化】CDOJ1689 分序列
斜率优化裸题,模型可以看http://www.cnblogs.com/ka200812/archive/2012/08/03/2621345.html #include<cstdio> # ...