jQuery阻止from表单的提交

66 阅读 0 评论 44 点赞

我是靠谱客的博主单身蜜蜂，最近开发中收集的这篇文章主要介绍jQuery阻止from表单的提交，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

问题:

　　在写Django项目时,用到之前写的一个登陆界面,里面用JQ给from表单绑定了几个简单的校验事件,然后今天在将表单提交到后台的时候,当校验不通过时仍然刷新了页面,造成JQ的提示文本不能正常显示,于是就想到了怎么去阻止form表单的提交

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.css">
<style>
body {
background-color: #eeeeee;
}
.login-box {
margin-top: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 login-box">
<form class="form-horizontal" action="" method="post">
{% csrf_token %}
<h2 class="text-center">请登录</h2>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">用户名</label>
<div class="col-sm-9">
<input type="text"
name="n1" class="form-control" id="inputEmail3" placeholder="用户名">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">密码</label>
<div class="col-sm-9">
<input type="password" class="form-control"
name="p1" id="inputPassword3" placeholder="密码">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label>
<input type="checkbox"> 记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" id="b1" class="btn btn-block btn-primary" >登录</button>
<p style="text-align: center;color: red">{{ error_msg }}</p>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="/static/jQuery.js"></script>
<script>
$("#b1").click(function () {
$("input:not([type='checkbox'])").each(function () {
// 判断值不为空
if ($(this).val().length === 0){
// 展示错误提示
var errMsgPrefix = $(this).parent().prev().text();
$(this).next().text(errMsgPrefix + "不能为空");
$(this).parent().parent().addClass("has-error");
}
});
});
// 给输入框绑定获取焦点的事件

$("input:not([type='checkbox'])").focus(function () {
// 清空错误提示

$(this).next().text("");
// 移除父标签的has-error

$(this).parent().parent().removeClass("has-error");
});
</script>
</body>
</html>

原代码

然后在网上搜到了jQuery 事件 - preventDefault() 方法

定义和用法:preventDefault() 方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。

实例:防止链接打开 URL：

$("a").click(function(event){
event.preventDefault();
});

对照将原代码中JQ语句改成如下

 $("#b1").click(function (event) {
$("input:not([type='checkbox'])").each(function () {
// 判断值不为空
if ($(this).val().length === 0){
// 展示错误提示
var errMsgPrefix = $(this).parent().prev().text();
$(this).next().text(errMsgPrefix + "不能为空");
$(this).parent().parent().addClass("has-error");
event.preventDefault();
}
});
});

再此执行,当不输入内容时,页面不跳转并显示辅助文本,当校验通过时正常跳转

另附:w3school 关于此方法的解释

转载于:https://www.cnblogs.com/luxiangyu111/p/9890348.html