【 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中报错了. 各 ...
随机推荐
- jzoj5843
给定 n 个正整数序列 ,每个序列长度为m. 选择至少 1 个序列,在每个被选择的序列中选择一个元素,求出所有被选择的元素的 gcd. 求所有方案的结果之和,答案对 1e9+7 取模.两种方案不同,当 ...
- js有关数组的函数
map()和filter()函数 js的数组迭代器函数map和filter,可以遍历数组时产生新的数组,和python的map函数很类似1)filter是满足条件的留下,是对原数组的过滤(筛选):2) ...
- centos7修改默认运行级别的变化
在学习centos7,视频教学中使用的的centos6,查看权限文件命令为 cat /etc/inittab/ 但是在centos7中输入以下命令会出现这种情况 这个已经不用了,现在修改权限的命令修改 ...
- day 46 Django 学习3 数据库单表操作以及反向解析
前情提要: Django 已经学了不少了, 今天学习链接数据库的操作.以及相关的反向解析等 一:反向解析 1:反向解析模板层 跳转时设定url会随着前面的路由改变而改变 2:反向解析之 ...
- innodb分配内存
innodb分配内存有三种方法 1)使用OS的malloc 2)使用innodb自己实现的内存分配方法 3)使用goolge的Tmalloc innodb引擎分析之内存管理 在my.cn配置文件中可设 ...
- POJ 1131
#include <iostream> #include <string> using namespace std; ]; int main() { //freopen(&qu ...
- 一个用JS数组实现的队列
一个用JS数组实现的队列 /*一个用数组实现的队列*/ function Queue(){ this.dataStore = [];//存放队列的数组,初始化为空 this.enqueue = enq ...
- 对Deeplung检测+两样性分类的一个整合
整体的流程分为以下几步: 读取原始数据(.mhd文件)——> 生成mask ——> 对数据预处理 ——> 执行检测 ——> 对检测结果进行分类 ——>可视化 懒一点,不贴 ...
- C#设计模式系列目录
http://www.cnblogs.com/libingql/archive/2012/04/16/2451608.html 抽空,学习,加强!
- jenkins自动部署tomcat
关于部署的3种思路: 远程部署(jenkins编译部署到远程服务器): 安装ssh插件 ssh插件配置 添加远程jenkins服务器节点: 本地部署(与jenkins在同一服务器): 关于maven构 ...