一、html页面
-
{% csrf_token %} 否则403
-
{{ obj_register.username }} 用来展示form表单插件
-
{{ obj_register.username.label }} 展示label
-
AJAX
-
点击刷新验证码利用？拼接连接
function chagecod(ths) {
ths.src = ths.src+"?";
}
-
接受后台返回值
-
注意clean的处理过的函数封装在'all'中
-
逻辑当用户输入的不符合需求时，要出发自动刷新验证码，清空对应内容
-
错误信息展示时要每个字段都判断一次是否存在做出相对判断
if(eorr.password{
$('#pwd_error').text(eorr.password[0])
}else {
$('#pwd_error').text("")
}
if(eorr.__all__) {
$('#cpwd_error').text(eorr.__all__[0])
}else {
$('#us_error').text("")
}
if(eorr.username){$('#us_error').text(eorr.username[0])}else{$('#us_error').text("")}
if(eorr.nickname){$('#ni_error').text(eorr.nickname[0])}else {$('#ni_error').text(" ")}
if(eorr.email){$('#em_error').text(eorr.email[0])}else{$('#em_error').text("")}
if(eorr.check_code){$('#ck_error').text(eorr.check_code[0])}else{$('#ck_error').text("")}
function register() {
$('#sumbit').click(
function () {
$.ajax({
url:'/register.html/',
type:'POST',
data:$('#login_form').serialize(),
dataType:'JSON',
success:function (arg) {
if(arg.status){
location.href='/login.html/'
}else {
var eorr = arg.message
//刷新验证码
//清空密码框
var img = $('#chekcode')[0];
img.src = img.src + "?";
$('#id_confirm_password,#id_password').val('')
console.log(eorr)
if(eorr.password)
{
$('#pwd_error').text(eorr.password[0])
}else {
$('#pwd_error').text("")
}
if(eorr.__all__) {
$('#cpwd_error').text(eorr.__all__[0])
}else {
$('#us_error').text("")
}
if(eorr.username){$('#us_error').text(eorr.username[0])}else{$('#us_error').text("")}
if(eorr.nickname){$('#ni_error').text(eorr.nickname[0])}else {$('#ni_error').text(" ")}
if(eorr.email){$('#em_error').text(eorr.email[0])}else{$('#em_error').text("")}
if(eorr.check_code){$('#ck_error').text(eorr.check_code[0])}else{$('#ck_error').text("")}
}
}
})
}
)
}
<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/plugins/bootstrap/js/bootstrap.min.js"></script>
<style>
body{background:no-repeat;background-size:cover;font-size: 16px;}
.form{background: rgba(255,255,255,0.2);width:400px;margin:100px auto;}
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
.container {
width: 940px;
.center-block();
}
</style>
</head>
<body>
<div class="center-block container" >
<div class="form row center-block container">
<form class="form-horizontal col-sm-offset-3 col-md-offset-3" id="login_form" target="ifram">
{% csrf_token %}
<h3 class="row center-block container form-title">Login to your account</h3>
<div class="input-group margin-bottom-sm">
<div class="form-group input-group">
{{ obj_register.username.label }}
<span class="input-group-addon"> <i class="fa fa-user fa-lg"></i></span>
{{ obj_register.username }}
</div>
<span id="us_error"></span>
</div>
<div class="input-group margin-bottom-sm">
<div class="form-group input-group">
{{ obj_register.nickname.label }}
<span class="input-group-addon"><i class="fa fa-user-circle-o"></i></span>
{{ obj_register.nickname }}
</div>
<span id="ni_error"></span>
</div>
<div class="input-group margin-bottom-sm">
<div class="form-group input-group">
{{ obj_register.password.label }}
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
{{ obj_register.password }}
</div>
<span id="pwd_error"></span>
</div>
<div class="input-group margin-bottom-sm">
<div class="form-group input-group">
{{ obj_register.confirm_password.label }}
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
{{ obj_register.confirm_password }}
</div>
<span id="cpwd_error"></span>
</div>
<div class="input-group margin-bottom-sm">
<div class="form-group input-group">
{{ obj_register.email.label }}
<span class="input-group-addon"> <i class="fa fa-envelope-open"></i></span>
{{ obj_register.email }}
</div>
<span id="em_error"></span>
</div>
<div class="input-group margin-bottom-sm">
<div class="form-group input-group">
{{ obj_register.check_code.label }}
<span class="input-group-addon"> <i class="fa fa-envelope-open"></i></span>
{{ obj_register.check_code }}
</div>
<img id="chekcode" src="/code.html" onclick="chagecod(this);">
</div>
<span id="ck_error"></span>
{# <div class="input-group margin-bottom-sm">#}
{##}
{# {{ obj_register.avatar_img.label }}#}
{# {{ obj_register.avatar_img }}#}
{##}
{##}
{# </div>#}
<a href="#" class="btn btn-danger" id="sumbit">注册</a>
</form>
</div>
</div>
<script>
$(function () {
register();
})
function chagecod(ths) {
ths.src = ths.src+"?";
}
function register() {
$('#sumbit').click(
function () {
$.ajax({
url:'/register.html/',
type:'POST',
data:$('#login_form').serialize(),
dataType:'JSON',
success:function (arg) {
if(arg.status){
location.href='/login.html/'
}else {
var eorr = arg.message
//刷新验证码
//清空密码框
var img = $('#chekcode')[0];
img.src = img.src + "?";
$('#id_confirm_password,#id_password').val('')
console.log(eorr)
if(eorr.password)
{
$('#pwd_error').text(eorr.password[0])
}else {
$('#pwd_error').text("")
}
if(eorr.__all__) {
$('#cpwd_error').text(eorr.__all__[0])
}else {
$('#us_error').text("")
}
if(eorr.username){$('#us_error').text(eorr.username[0])}else{$('#us_error').text("")}
if(eorr.nickname){$('#ni_error').text(eorr.nickname[0])}else {$('#ni_error').text(" ")}
if(eorr.email){$('#em_error').text(eorr.email[0])}else{$('#em_error').text("")}
if(eorr.check_code){$('#ck_error').text(eorr.check_code[0])}else{$('#ck_error').text("")}
}
}
})
}
)
}
</script>
</body>
</html>
