最近在写页面的时候,需要手动写一些在表单进行提交前的验证操作,正好看到了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 在表单提交前进行操作的更多相关文章

  1. springmvc下js控制表单提交(表单提交前检验,提交后获取json返回值)

    这个问题我搞了四天,终于搞懂.因为对js很不熟悉.郁闷的是后台代码出错总可以设置断点调试,前端js代码出错只能通过浏览器提供一些运行数据来分析,很不习惯. 首先说下逻辑:这是一个注册功能,我希望,注册 ...

  2. a标签指定的url,在表单提交前进行js验证的实现

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. javascprit form表单提交前验证以及ajax返回json

    1.今天要做一个手机验证码验证的功能.需求是前端页面点击发送 短信验证码,后台接收后通过ajax返回到前端,之后前端在提交时候进行验证.思路很简单,不过做的过程还是学到不少的东西. 1.ajax请求后 ...

  4. form的onsubmit事件--表单提交前的验证最佳实现方式

    今天遇到了一个问题,页面中include了很多的公共页面(都是没有form的),并且里面好多的地方都是自行提交的(页面中加入一个type=“submit”域,然后js中写入sumbit.click来执 ...

  5. jquery.form.js 让表单提交更优雅

    jquery.form.js 让表单提交更优雅.可以页面不刷新提交表单,比jQuery的ajax提交要功能强大. 1.引入 <script src="/src/jquery-1.9.1 ...

  6. 利用JS 阻止表单提交

    情景一:不存在Ajax异步操作 1 使用背景:会议室预定管理系统中,当表单提交的时候需要验证预约的时间是否符合预定规则(不需要通过访问服务器),否则提示错误信息,阻止表单提交. 2 相关技术点: fo ...

  7. 【转载】[JS]让表单提交返回后保持在原来提交的位置上

    有时候,在网页中点击了页面中的按钮或是刷新了页面后,页面滚动条又 会回到顶部,想看后面的记录就又要拖动滚动条,或者要按翻页键,非常不方便,想在提交页面或者在页面刷新的时候仍然保持滚动条的位置不变,最好 ...

  8. js阻止表单提交

    <!DOCTYPE html><html><head>    <title>Simple Login Form</title>    < ...

  9. Html form 表单提交前验证

    可以使用form表单的onsubmit方法,在提交表单之前,对表单或者网页中的数据进行检验. onsubmit指定的方法返回true,则提交数据:返回false不提交数据. 直接看下面的代码: 1 & ...

随机推荐

  1. CentOS6.5修改/etc/pam.d/sshd后root无法ssh登陆

    现象:由于公司需要服务器的登陆操作进行安全加固,同事为了省事,直接把CentOS7上的/etc/pam.d/sshd替换掉CentOS6.5上的/etc/pam.d/sshd,导致root用户ssh登 ...

  2. hihoCoder #1870 : Jin Yong’s Wukong Ranking List-闭包传递(递归) (ACM-ICPC Asia Beijing Regional Contest 2018 Reproduction A) 2018 ICPC 北京区域赛现场赛A

    P1 : Jin Yong’s Wukong Ranking List Time Limit:1000ms Case Time Limit:1000ms Memory Limit:512MB Desc ...

  3. ZUFEOJ 2147 07染色带谜题

    2147: 07染色带谜题 时间限制: 1 Sec  内存限制: 128 MB提交: 170  解决: 21[提交][状态][讨论版][Edit] [TestData] 题目描述 现在给你一个长为N的 ...

  4. struts2核心配置之Action

    一.实现Action类 1.POJO实现(Plain Ordinary Java Object 简单的java对象) public class User1 { public String execut ...

  5. SGU167 I-country

    嗯以前在某个DP专题了发过这道题,但是当时没码代码,现在重发一篇题解 思考阶段如何划分:由已经处理的行数向下扩展,但是仅有行数我们无法描述状态空间那我们再加入已经选过的格子数,这样我们似乎可以确定我们 ...

  6. 安装Windows渗透环境工具--PentestBox

    PentestBox不同于运行在虚拟机或者双启动环境的Linux渗透测试发行版. 它打包了所有的安全工具,并且可以在Windows系统中原生地运行,有效地降低了对虚拟机或者双启动环境的需求. 下载地址 ...

  7. Web移动应用调试工具——Weinre

          如今人们也越来越习惯在手机上浏览网页,而在手机上这些针对桌面浏览器设计的网页经常惨不忍睹.Web应用开发者需要针对手机进行界面的重新设计,但是手机上并没有称心如意的调试工具(如Firebu ...

  8. AtCoder - 4162 Independence

    Problem Statement In the State of Takahashi in AtCoderian Federation, there are N cities, numbered 1 ...

  9. Codeforces 961E 主席树

    题意: 给出一个n个数的序列,求有几对(i,j)满足a[i]>=j&&a[j]>=i,(i,j)和(j,i)只能算一对. 考虑第i个数会有几个j(j<i)满足条件,首 ...

  10. [Contest20171006]Subsequence Count

    给定一个01串$S_{1\cdots n}$和$Q$个操作.操作有两种类型:1.将$[l,r]$区间的数取反(将其中的$0$变成$1$,$1$变成$0$).2.询问字符串$S$的子串$S_{l\cdo ...