setting.py
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
from django import forms
from django.forms import widgets
from blog.models import *
from django.core.exceptions import ValidationError
class RegisterForms(forms.Form):
user = forms.CharField(
min_length=2,
error_messages={
'required': '用户名不能为空',
'min_length': '用户名长度为8-20个字符',
'max_length': '用户名长度为8-20个字符'
},
widget=widgets.TextInput(
attrs={
'class': 'form-control',
'placeholder': '用户名',
'autocomplete': 'off'
}
)
)
pwd = forms.CharField(
min_length=2,
error_messages={
'required': '密码不能为空',
'min_length': '密码长度为8-20个字符',
'max_length': '密码长度为8-20个字符'
},
widget=widgets.PasswordInput(
attrs={
'class': 'form-control',
'placeholder': '密码',
'autocomplete': 'off'
}
)
)
repeat_pwd = forms.CharField(
min_length=2,
error_messages={
'required': '确认密码不能为空',
'min_length': '密码长度不符合规则',
'max_length': '密码长度不符合规则'
},
widget=widgets.PasswordInput(
attrs={
'class': 'form-control',
'placeholder': '确认密码',
'autocomplete': 'off'
}
)
)
email = forms.EmailField(
error_messages={
'required': '邮箱不能为空',
'invalid': '邮箱格式不正确'
},
widget=widgets.EmailInput(
attrs={
'class': 'form-control',
'placeholder': '邮箱地址',
'autocomplete': 'off'
}
)
)
def clean_user(self):
user = self.cleaned_data.get('user')
if not UserInfo.objects.filter(username=user):
return user
else:
raise ValidationError('用户名已存在')
def clean(self):
pwd = self.cleaned_data.get('pwd')
repeat_pwd = self.cleaned_data.get('repeat_pwd')
if pwd and repeat_pwd:
if pwd == repeat_pwd:
return self.cleaned_data
else:
raise ValidationError('两次密码不一致')
else:
return self.cleaned_data
urls.py
from django.views.static import serve
from yy import settings
url(r'^register/$', views.register),
url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),
views.py
from utils.register_forms import RegisterForms
def register(request):
"""
注册页面
:param request:
:return:
"""
if request.is_ajax():
register_forms = RegisterForms(request.POST)
register_response = {'user': None, 'err_msg': None}
if register_forms.is_valid():
user = register_forms.cleaned_data.get('user')
pwd = register_forms.cleaned_data.get('pwd')
email = register_forms.cleaned_data.get('email')
avatar_obj = request.FILES.get('avatar')
user_obj = UserInfo.objects.create_user(username=user, password=pwd, email=email, avatar=avatar_obj)
register_response['user'] = user_obj.username
else:
register_response['err_msg'] = register_forms.errors
return HttpResponse(json.dumps(register_response))
register_forms = RegisterForms()
return render(request, 'register.html', {'register_forms': register_forms})
register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7/css/bootstrap.min.css">
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script src="/static/plugins/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<title>注册页面</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<div class="page-header">
<h1>
博客注册页面
<small>...</small>
</h1>
</div>
<form class="form-horizontal">
{% csrf_token %}
<div class="form-group">
<label for="id_user" class="col-md-3 control-label">用户名：</label>
<div class="col-md-5">
{{ register_forms.user }}
</div>
<span class="pull-left control-label"></span>
</div>
<div class="form-group">
<label for="id_pwd" class="col-md-3 control-label">密码：</label>
<div class="col-md-5">
{{ register_forms.pwd }}
</div>
<span class="pull-left control-label"></span>
</div>
<div class="form-group">
<label for="id_repeat_pwd" class="col-md-3 control-label">确认密码：</label>
<div class="col-md-5">
{{ register_forms.repeat_pwd }}
</div>
<span class="pull-left control-label"></span>
</div>
<div class="form-group">
<label for="id_email" class="col-md-3 control-label">邮箱地址：</label>
<div class="col-md-5">
{{ register_forms.email }}
</div>
<span class="pull-left control-label"></span>
</div>
<div class="form-group">
<label for="avatar">
头像：
<img id="avatar_img" width="60" height="60" src="/media/avatars/default.png" alt="头像">
</label>
<input type="file" id="avatar" class="hide">
</div>
<div class="form-group">
<div class="col-md-offset-3 col-md-3">
<button type="button" id="register" class="btn btn-primary btn-block">注册</button>
</div>
<div class="col-md-3">
<button type="reset" id="cancel" class="btn btn-warning btn-block">取消</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script>
// 上传头像预览
$("#avatar").change(function () {
// 获取上传文件的对象
var file_obj = $(this)[0].files[0];
// 实例化文件reader对象
var reader_file = new FileReader();
// reader对象读取文件对象
reader_file.readAsDataURL(file_obj);
// 显示读取完成之后的图片
reader_file.onload = function () {
$("#avatar_img").attr("src", this.result)
}
});
// ajax提交数据
$("#register").click(function () {
var form_data = new FormData();
form_data.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());
form_data.append("user", $("#id_user").val());
form_data.append("pwd", $("#id_pwd").val());
form_data.append("repeat_pwd", $("#id_repeat_pwd").val());
form_data.append("email", $("#id_email").val());
form_data.append("telephone", $("#id_telephone").val());
form_data.append("avatar", $("#avatar")[0].files[0]);
$.ajax({
url: "",
type: "post",
data: form_data,
contentType: false,
processData: false,
success: function (data) {
var register_response = JSON.parse(data);
if (register_response.user) {
location.href = '/login/'
} else {
// 清空之前的错误信息
$("div span").html("");
$(".form-group div").removeClass("has-error");
// 显示当前错误信息
$.each(register_response.err_msg, function (name, msg) {
$("#id_" + name).parent().addClass("has-error").next().html(msg[0]).css({
"color": "red",
"font-weight": 700
});
// 判断全局错误
if (name === "__all__") {
$("#id_repeat_pwd").parent().addClass("has-error").next().html(msg[0]).css({
"color": "red",
"font-weight": 700
});
}
})
}
}
})
});
</script>
</body>
</html>
浙公网安备 33010602011771号