表单示例:
<form class="needs-validation tab-pane fade show active" autocomplete="off" novalidate=""
id="signin-tab" name="loginform" method="post">
{% csrf_token %}
<div class="form-group">
<label for="id_uname">账号</label>
<input class="form-control" name="uname" id="id_uname" type="text"
placeholder="输入4-12位英文数字账户" pattern="[a-z0-9A-Z]{4,12}"
required>
<div class="invalid-feedback">请输入一个有效的账号.</div>
</div>
<div class="form-group">
<label for="si-password">密码</label>
<div class="password-toggle">
<input class="form-control" name="pwd" type="password" id="si-password"
pattern="[a-z0-9A-Z]{6,12}" required="">
<label class="password-toggle-btn">
<input class="custom-control-input" type="checkbox"><i
class="czi-eye password-toggle-indicator"></i><span
class="sr-only">显示密码</span>
</label>
<div class="invalid-feedback">请输入6-12位英文数字密码.</div>
</div>
</div>
<div class="form-group d-flex flex-wrap justify-content-between">
<div class="custom-control custom-checkbox mb-2">
<input class="custom-control-input" type="checkbox" id="si-remember">
<label class="custom-control-label" for="si-remember">记住我</label>
</div>
<a class="font-size-sm" href="#">忘记密码?</a>
</div>
<button class="btn btn-primary btn-block btn-shadow" type="submit" >立即登录</button>
</form>
javascript脚本
<script>
function logins() {
var bootstrapValidator = $("[name='loginform']").data('bootstrapValidator');
bootstrapValidator.validate();
if (bootstrapValidator.isValid())
$.ajax({
type: "post", //方法类型
url: "/user/login/",
data: $("[name='loginform']").serialize(),
success: function(data){
}
});
else return;
}
</script>
无刷新解决办法
<script>
$('#signin-tab').submit(function (e) {
if (e.isDefaultPrevented()) return
// PROCESS DATA ...
$.ajax({
type: "post", //方法类型
url: "/user/login/",
data: $("[name='loginform']").serialize(),
dataType: 'json',
success: function(data){
if (data=='1'){
window.location.reload();
} else {
$("#tsinfo").text('用户名密码错误');
setTimeout(function() { $("#tsinfo").hide(); }, 3000);
}
}
});
return false;//阻止页面刷新
})
</script>