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 & ...
随机推荐
- cookie笔记(二)
小荔枝 增 删 查 改 <form action="javascript:void(0)" method="get" accept-charset=&qu ...
- Codeforces 1131 B. Draw!-暴力 (Codeforces Round #541 (Div. 2))
B. Draw! time limit per test 2 seconds memory limit per test 256 megabytes input standard input outp ...
- Hibernate + Oracle 创建自增序列ID
1.创建自增序列 2.对ID创建触发器 3.Userinfo.hbm.xml使得<generator class="increment"> 序列: MAXVALUE I ...
- 链式前向星实现的堆优化dij求最短路模板
#include<cstdio> #include<string> #include<cstdlib> #include<cmath> #include ...
- ZOJ 3497 Mistwald
矩阵快速幂. 邻接矩阵的$P$次方就是走$P$步之后的方案数,这里只记录能否走到就可以了.然后再判断一下三种情况即可. #pragma comment(linker, "/STACK:102 ...
- python 理解高阶函数
高阶函数 高阶函数英文叫Higher-order function.什么是高阶函数? 变量可以指向函数 以Python内置的求绝对值的函数abs()为例,调用abs(): >>> a ...
- [USACO 2017 Jan Gold] Tutorial
Link: 传送门 A: 按值大小插入后用树状数组统计两边个数 #include <bits/stdc++.h> using namespace std; #define X first ...
- [BZOJ4898] [Apio2017]商旅
[BZOJ4898] [Apio2017]商旅 传送门 试题分析 考虑两个点之间的路径,显然如果交易的话肯定选\(S_{t,i}-B_{s,i}\)最大的. 那么我们可以先用\(Cost\)把两个点的 ...
- BZOJ 3343:教主的魔法(分块)
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3343 [题目大意] 给出一个数列,有区间加法操作,询问区间大于等于c的数字个数 [题解 ...
- rmq问题:ST表
存板子.O(nlogn)预处理,O(1)查询.空间O(nlogn). int d[1000006][25]; int mn[1000006]; void rmq_init() { for(int i= ...