最近在写页面的时候,需要手动写一些在表单进行提交前的验证操作,正好看到了2种阻止表单提交的方法,可以进行一些逻辑处理

方法一:使用return false

  1. 原生js写法:
  2. <form id="loginForm" name="loginForm" action="login.aspx" method="post">
  3. <button type="submit" value="Submit" id="submit">Submit</button>
  4. </form>
  5.  
  6. <script>
  7. var submitBtn = document.getElementById("submit");
  8.  
  9. submitBtn.onclick = function (event) {
  10. alert("preventDefault!");
  11. return false;
  12. };
  13. </script>
  14.  
  15. jquery写法:
  16. <script>
  17. $("#loginForm").submit(function(){
  18. if(条件){
  19. //此处这里进行逻辑处理
  20. }else{
  21. return false;
  22. }
  23. })
  24. </script>
  25.  
  26. //这里发现的一个问题就是,在用jq写法的时候,只要不返回false,逻辑处理完也会自动提交表单

方法二:使用preventDefault()

  1. <form name="loginForm" action="login.aspx" method="post">
  2. <button type="submit" value="Submit" id="submit">Submit</button>
  3. </form>
  4.  
  5. <script>
  6. var submitBtn = document.getElementById("submit");
  7.  
  8. submitBtn.onclick = function (event) {
  9. alert("preventDefault!");
  10. var event = event || window.event;
  11. event.preventDefault(); // 兼容标准浏览器
  12. window.event.returnValue = false; // 兼容IE6~8
  13. };
  14. </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. [图解算法]线性时间选择Linear Select——<递归与分治策略>

    #include <ctime> #include <iostream> using namespace std; template <class Type> vo ...

  2. 调用git命令行执行更新的思路

    cd /usr/local/software/CloudPlatformUtil/GitLab # CentOS6.5自带的git版本是1.7.1 # 安装高版本git wget -O git.zip ...

  3. Java学习笔记(十二)——eclipse和SVN配置,导入SVN服务器项目

    [前面的话] 北京的天气外加自己的不小心终于病了,在病的过程中,感觉身体好着真好,可以学习,可以吃好吃的,可以去运动,这一病了,干什么都感觉没有力气,身体好着真好. 这个文章的背景是:领导把项目最开始 ...

  4. EF Groupby

    最近做了个检索类的项目,其中就用到统计了,就是按照热门搜索排序来的. 话不多说,直接代码 var requirementSearchesOrder = app_RequirementSearches. ...

  5. [译]怎样在Vue.js中使用jquery插件

    原文:http://gambardella.info/2016/09/05/guide-how-to-use-vue-js-with-jquery-plugins 使用Vue真的太棒了,但是也有可能使 ...

  6. 利用jquery.touchSwipe.js实现的移动滑屏效果。

    利用jquery.touchSwipe.js实现的移动滑屏效果. 亲测:兼容ie8及各种浏览器 <script type="text/javascript" src=&quo ...

  7. ubuntu安装wine

    1.安装源 sudo add-apt-repository ppa:wine/wine-builds sudo apt-get update 2.安装wine sudo apt-get install ...

  8. HDU3466 Proud Merchants [背包]

    题目传送门 Proud Merchants Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/O ...

  9. 大数据技术之_11_HBase学习_02_HBase API 操作 + HBase 与 Hive 集成 + HBase 优化

    第6章 HBase API 操作6.1 环境准备6.2 HBase API6.2.1 判断表是否存在6.2.2 抽取获取 Configuration.Connection.Admin 对象的方法以及关 ...

  10. shell 执行结果赋给变量

    #将pwd的执行结果放到变量value中保存, value=$(pwd) 另一种方法: value=`pwd`