image.png
一、思路
-
驗(yàn)證碼可以點(diǎn)擊刷新
function chagecode(ths) {
ths.src = ths.src + "?";
};
-
輸入錯(cuò)誤后自動(dòng)刷新驗(yàn)證碼，刪除密碼
-
AJAX
function login() {
$('#subitm').click(
function () {
$.ajax({
url:'/login.html/',
type:'POST',
data:$('#fm').serialize(),
headers:{'X-CSRFtoken':$.cookie('csrftoken')},
dataType:'JSON',
success:function (arg) {
if (arg.status){
location.href='/'
}else {
//刷新驗(yàn)證碼
//清空密碼欄
var img = $('#code_img')[0];
img.src = img.src+"?";
$('#id_password').val('')
var erro_msg = arg.message
$('#erro').text(erro_msg)
}
}
})
}
)
}
整體頁(yè)面
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.min.css">
<script src="/static/js/jquery-1.12.4.js"></script>
<script src="/static/js/jquery.cookie.js"></script>
<script src="/static/plugins/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Top menu -->
<nav class="navbar navbar-inverse navbar-no-bg" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">歡迎登陸</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="top-navbar-1">
</div>
</div>
</nav>
<!-- Top content -->
<div class="top-content">
<div class="inner-bg">
<div class="container">
<div class="row">
<div class="col-sm-7 text">
<h1><strong>十年</strong> 一個(gè)約定</h1>
<div class="description">
<h1>
從這里開始...
</h1>
</div>
</div>
<div class="col-sm-5 form-box">
<div class="form-top">
<div class="form-top-left">
<h3>登陸</h3>
<p>填寫你的登陸賬號(hào)</p>
</div>
<div class="form-top-right">
<i class="fa fa-pencil"></i>
</div>
<div class="form-top-divider"></div>
</div>
<div class="form-bottom">
<form id="fm" role="form" class="registration-form">
<div class="form-group">
<label for="id_username" style="font-size: 20px">用戶名</label>
{{ login_obj.username }}
</div>
<div class="form-group">
<label for="id_password" style="font-size: 20px">密碼</label>
{{ login_obj.password }}
</div>
<label for="id_check_code" style="font-size: 20px">驗(yàn)證碼</label>
<div class="form-group">
{{ login_obj.check_code }}
<img id="code_img" src="/code.html" onclick="chagecode(this);">
</div>
<span id="erro"></span>
<div class="form-group">
免登一個(gè)月{{ login_obj.check_box }}
</div>
<a id="subitm" href="#" class="btn btn-success">登陸</a>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
login();
})
function chagecode(ths) {
ths.src = ths.src + "?";
};
function login() {
$('#subitm').click(
function () {
$.ajax({
url:'/login.html/',
type:'POST',
data:$('#fm').serialize(),
headers:{'X-CSRFtoken':$.cookie('csrftoken')},
dataType:'JSON',
success:function (arg) {
if (arg.status){
location.href='/'
}else {
//刷新驗(yàn)證碼
//清空密碼欄
var img = $('#code_img')[0];
img.src = img.src+"?";
$('#id_password').val('')
var erro_msg = arg.message
$('#erro').text(erro_msg)
}
}
})
}
)
}
</script>
</body>
</html>
