最近做的一个项目，我分到的部分有表单验证。点击了提交按钮，但我并不想让他跳转页面去提交。于是经过各种百度，各种 stackoverflow，各种抱大神腿之后，有了以下解决办法：

重点就是阻止 form 的 submit() 默认提交行为，一种方法用 return false，另一种是 event.preventDefault(); 两种方法都可以，但却又有不同，要根据你的实际情况选择。有什么不同呢，看完文章就告诉你。

首先 html 里 code 如下：

 <!doctype html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>form</title>

 </head>

 <body>

     <form action="www.baidu.com" method="post" id="myForm" novalidate> //novalidate是为了防止 HTML5 表单执行原生的校验，从而只执行你自定义的验证。

         <input type="name" id="name" required>

         <input type="submit" value="submit">

     </form>

     <script src="scripts/jquery.min.js"></script>

     <script src="scripts/demo.js"></script>

 </body>

 </html>

js 里 code 如下：

 $('#myForm').submit(function(event){

     if (!$('#name').val()) {

     alert('name 不能为空');

     event.preventDefault();

     };

 })

当表格 name 的值为空时，弹出提示框，并阻止跳转。代码演示：http://plnkr.co/edit/CZ9TYOMKXheCvq7fMQ7f?p=preview

当然你也可以用 return false 来阻止，代码如下：

 $('#myForm').submit(function(event){

     if (!$('#name').val()) {

     alert('name 不能为空');

     return false;

     };

 })

代码演示：http://plnkr.co/edit/CZ9TYOMKXheCvq7fMQ7f?p=preview

如果你用的是什么 angularjs 框架之类的，只需要往这个代码上加 ng-controller 、ng-app 之类的就可以了。

最后说一下 return false  和 event.preventDedault() 的区别：如果你在阻止了表单的提交行为之后，还想干点别的，那就用 event.preventDefault()，比如给空 input 加一个红色边框提醒用户之类的，因为 return false 之后的代码不会执行。如果什么也不想干，那两者就没有区别了，由你任性！

红色边框代码：

 $('#myForm').submit(function(event){

     if (!$('#name').val()) {

     alert('name 不能为空');

     event.preventDefault();

     $('#name').css('border-color','red');

     }

 })

ps：event.preventDefault();是个什么鬼？http://www.w3school.com.cn/jsref/event_preventdefault.asp

看什么？！评论关注啊！

【 js 片段 】如何组织表单的默认提交？【亲测有效】的更多相关文章

  1. 防止表单提交时刷新页面-阻止form表单的默认提交行为

    最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有 由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...

  2. 工作中碰到的js问题（disabled表单元素不能提交到服务器）

    今天碰到一个奇葩的问题,asp页面表单提交后,有一个文本框<input type="text" name="phone" id="phone&q ...

  3. HTML form表单的默认提交方式

    默认为Get,亲测.. key值为控件name属性值,如果没有 url中就没有此值 aspx中默认Form表单提交方式为post

  4. form表单的默认提交行为

    一 如果<form></form>表单中只有一个<input type="text"/>,则使文本框获取焦点,并单击回车,form会自动提交. ...

  5. JS高程3：表单脚本

    HTML和CSS对表单的操作还是比较乏力的,在表单操作中,JS势必会使用到. 基础知识 文本框 选择框 序列化 富文本编辑器 基础知识 HTMLFormElement接口可以创建或者修改<for ...

  6. js replace 全局替换 以表单的方式提交参数 判断是否为ie浏览器 将jquery.qqFace.js表情转换成微信的字符码 手机端省市区联动 新字体引用本地运行可以获得，放到服务器上报404 C#提取html中的汉字 MVC几种找不到资源的解决方式 使用Windows服务定时去执行一个方法的三种方式

    js replace 全局替换   js 的replace 默认替换只替换第一个匹配的字符,如果字符串有超过两个以上的对应字符就无法进行替换,这时候就要进行一点操作,进行全部替换. <scrip ...

  7. js实现无刷新表单提交文件，将ajax请求转换为form请求方法

    最近在做项目的时候遇到一个需要上传文件的需求,因为ajax请求是无法上传二进制文件流的,所以只能用form表单提交,而form提交有一个问题就是会使页面刷新,本文解决了form表单提交文件时页面刷新的 ...

  8. form表单 无法提交js动态添加的表单元素问题。。

    第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url   ...

  9. 用JS动态创建登录表单，报了个小错误

    后来发现原来是: dvObj.style.border='#Red 1px sold'; 其中的Red多谢了一个‘#’, 但是奇怪的是在chrome和firefox都备有报错,但是在ie中报错了. 各 ...

随机推荐

  1. [Swift实际操作]七、常见概念-(6)日期Date和DateFormatter日期的格式化

    本文将为你演示日期类型的使用,以及如何对日期进行格式化. 首先引入需要使用到的界面框架 import UIKit 初始化一个日期对象,它的值和当前电脑中的日期相同 var date = Date() ...

  2. JavaScript里的Date 对象属性及对象方法－－实现简单的日历

    上网搜索"js 日历插件"就会出来各种效果的功能丰富的日历插件,很多都可以下载源码,然后根据各自的需求对源码进行修改就可以直接用了. 但今天讲的不是如何使用这些插件,而是讲如何实现 ...

  3. [BZOJ2758] [SCOI2012]Blinker的噩梦 扫描线+set

    题目大意:有n个圆或凸多边形,这些图形不会相交,每当走入或走出一个图形时需要异或上一个代价,有m组操作: 询问操作,每次询问从一个点走到另一个点时,需要的代价(初始代价为0) 修改操作,每次修改一个图 ...

  4. 50道JAVA基础编程练习题

    50道JAVA基础编程练习题 [程序1] 题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子对数为多少? 程序分析 ...

  5. windows本地调试安装hadoop（idea） : ERROR util.Shell: Failed to locate the winutils binary in the hadoop binary path

    1,本地安装hadoop https://mirrors.tuna.tsinghua.edu.cn/apache/hadoop/common/ 下载hadoop对应版本 (我本意是想下载hadoop ...

  6. Postman—命令执行脚本及生成报告

    前言 前面的应用中,都是在postman图形界面工具里面进行测试,但是有时候我们需要把测试脚本集成到CI平台,或者在非图形界面的系统环境下进行测试,那么我们该如果处理呢 通过newman来执行post ...

  7. Android之Activity界面跳转--生命周期方法调用顺序

    这本是一个很基础的问题,很惭愧,很久没研究这一块了,已经忘得差不多了.前段时间面试,有面试官问过这个问题.虽然觉得没必要记,要用的时候写个Demo,打个Log就清楚了.但是今天顺手写了个Demo,也就 ...

  8. jieba分词加入特殊字符和空格

    将原始jieba字典中的空格更改为 @@ 1.原来:雅不可攀 3 nr 2.现在:雅不可攀@@3@@nr 将自定义用户词典加入的词与词性中间的空格更改为@@ 1.原来:牵连关系 50 n 2.现在:牵 ...

  9. springcloud 熔断处理

    在springcloud微服务中,有时候一个服务挂了,我们需要友好的提示,此时我们在api网关路由上做一下过滤,进行友好的提示处理. 代码如下: import com.fasterxml.jackso ...

  10. Maven 映像

    国内连接maven官方的仓库更新依赖库,网速一般很慢,收集一些国内快速的maven仓库镜像以备用. ====================国内OSChina提供的镜像,非常不错=========== ...