【 js 片段 】如何组织表单的默认提交？【亲测有效】
最近做的一个项目，我分到的部分有表单验证。点击了提交按钮，但我并不想让他跳转页面去提交。于是经过各种百度，各种 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 片段 】如何组织表单的默认提交？【亲测有效】的更多相关文章
- 防止表单提交时刷新页面-阻止form表单的默认提交行为
最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有 由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...
- 工作中碰到的js问题（disabled表单元素不能提交到服务器）
今天碰到一个奇葩的问题,asp页面表单提交后,有一个文本框<input type="text" name="phone" id="phone&q ...
- HTML form表单的默认提交方式
默认为Get,亲测.. key值为控件name属性值,如果没有 url中就没有此值 aspx中默认Form表单提交方式为post
- form表单的默认提交行为
一 如果<form></form>表单中只有一个<input type="text"/>,则使文本框获取焦点,并单击回车,form会自动提交. ...
- JS高程3：表单脚本
HTML和CSS对表单的操作还是比较乏力的,在表单操作中,JS势必会使用到. 基础知识 文本框 选择框 序列化 富文本编辑器 基础知识 HTMLFormElement接口可以创建或者修改<for ...
- js replace 全局替换 以表单的方式提交参数 判断是否为ie浏览器 将jquery.qqFace.js表情转换成微信的字符码 手机端省市区联动 新字体引用本地运行可以获得，放到服务器上报404 C#提取html中的汉字 MVC几种找不到资源的解决方式 使用Windows服务定时去执行一个方法的三种方式
js replace 全局替换 js 的replace 默认替换只替换第一个匹配的字符,如果字符串有超过两个以上的对应字符就无法进行替换,这时候就要进行一点操作,进行全部替换. <scrip ...
- js实现无刷新表单提交文件，将ajax请求转换为form请求方法
最近在做项目的时候遇到一个需要上传文件的需求,因为ajax请求是无法上传二进制文件流的,所以只能用form表单提交,而form提交有一个问题就是会使页面刷新,本文解决了form表单提交文件时页面刷新的 ...
- form表单 无法提交js动态添加的表单元素问题。。
第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url ...
- 用JS动态创建登录表单，报了个小错误
后来发现原来是: dvObj.style.border='#Red 1px sold'; 其中的Red多谢了一个‘#’, 但是奇怪的是在chrome和firefox都备有报错,但是在ie中报错了. 各 ...
随机推荐
- biz_platform项目过程
1.前台界面主要采用React框架.通过Ajax方式将数据与tornado服务器交互.以下代码为请求后台数据. var ThisPage = React.createClass({ render: f ...
- 一个Unix内核级别漏洞（一）
翻译原创稿件,prison整理翻译,首发ichunqiu,原地址:http://lsd-pl.net/kernelvuln.pdf 这是一篇关于Unix内核级别漏洞的paper,由某团队发布在一次黑客 ...
- jmeter-server中启动后端口总是不断在变化
1.首先找到这个文件打开: 2.修改两个地方如图: 第一个:server_port=xxxx 第二个:server.rmi.localport=xxxx 3.重启jmeter-server,这是在li ...
- android平台一些常用代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
- git 查看提交记录
查看提交的内容 -p 选项,同时在 - 后加数字限制一下数目 git log -p -2. commit 500eeadd71a21f1166803e12a792bfa86f4ca784 (HEAD ...
- UR5 改造
背景 项目要求 UR5 安装在移动平台上,需要做以下改造: 供电:由 220V 市电改为直流电源(锂电池)直接供电: 控制:由示教器控制改为上位机远程控制 线路改造 1. UR5 电气图(来自UR5服 ...
- IOC容器02
获取xml文件路径,使用IO读取xml文件,使用Document对象解析xml文件,将xml中的bean的信息注册到BeanDefinition类,将BeanDefinition保存到一个map中:该 ...
- 剑指offer五十九之按之字形顺序打印二叉树
一.题目 请实现一个函数按照之字形打印二叉树,即第一行按照从左到右的顺序打印,第二层按照从右至左的顺序打印,第三行按照从左到右的顺序打印,其他行以此类推.二.思路 详见代码 三.代码 import j ...
- 启动Storm各个后台进程
启动Storm的所有后台进程.和Zookeeper一样,Storm也是快速失败(fail-fast)的系统,这样Storm才能在 任意时刻被停止,并且当进程重启后被正确地恢复执行.这也是为什么Stor ...
- Python运行MapReducer程序时所遇异常
landen@Master:~/UntarFile/hadoop-1.0.4$ bin/hadoop jar contrib/streaming/hadoop-streaming-1.0.4.jar ...