您的位置：首页 > Web前端 > JavaScript

【 js 片段】如何组织表单的默认提交？【亲测有效】

2016-04-14 22:34 411 查看

最近做的一个项目，我分到的部分有表单验证。点击了提交按钮，但我并不想让他跳转页面去提交。于是经过各种百度，各种 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 片段 】如何组织表单的默认提交？【亲测有效】

【 js 片段】如何组织表单的默认提交？【亲测有效】