1. The front end portion (the introduction and jquery bootstrap)
<div class="container">
<div class="col-md-8 col-md-offset-2">
{% for item in form %}
<div class="form-group">
<lable>{{ item.label }}</lable>
{{ item }}
<span class="error pull-right"></span>
</div>
{% endfor %}
<input type="submit" class="btn btn-primary reg_btn" value="提交">
</div>
</div>
<script>
$('.reg_btn').click(function () {
$.ajax({
url:'',
type:"post",
dataType:"json",
data:{
user:$('#id_user').val(),
pwd:$('#id_pwd').h ()
r_pwd:$('#id_r_pwd').val(),
email:$('#id_email').val(),
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
},
success:function (res) {
if(res.user){
location.href='/login/'
}else{
$('.error').html('');
$(' .Form-Group ' ) .removeClass ( ' has-error ' );
// for traversing corresponding information displayed on the page
$ .each (res.err, function (I, J) {
/ * * IF (I == ' __all __ ') {
$ (' # id_r_p ') Next () HTML (J [0]) CSS (...' Color ',' Red has-error ')') parent (). addClass (.. ';
} the else {
.. $ ( '# ID _' + I) .next () HTML (J [0]) CSS ( 'Color', 'Red') parent (). addClass ( 'has-error');..
} * * /
// display an error message is generated in the span's
$ ( '#id_'+i).next().html(j[html(j[0]).css('color','red').parent().addClass('has-error');
});
}
}
});
});
</script>
2. Background python
2.1 pairs django user table extension assembly field
(1) add a new field in the user table of the models
from django.db import models
from django.contrib.auth.models import AbstractUser
# Create your models here.
class user_info(AbstractUser):
tel=models.CharField(max_length=32)
(2) change user authentication table configuration information setting component in
AUTH_USER_MODEL='app01.user_info'
修改之后需重新迁移数据库,如果无需添加新字段可省去上述步骤,直接使用django默认提供的auth_user表
2.2 业务代码
from django.http import JsonResponse
from django import forms
from app01.models import user_info
from django.core.exceptions import ValidationError
import re
from django.forms import widgets
#注册视图函数
def register(request):
if request.method=='GET':
form=UserForm()
return render(request,'register.html',locals())
elif request.method=="POST":
res={"user":None,'err':""}
form=UserForm(request.POST)
#验证用户信息
if form.is_valid():
res['user']=form.cleaned_data.get('user')
user=form.cleaned_data.get('user')
pwd=form.cleaned_data.get('pwd')
email=form.cleaned_data.get('email')
user_info.objects.create_user(username=user,password=pwd,email=email)
else:
res['err']=form.errors
return JsonResponse(res)
#创建验证规则对象
class UserForm(forms.Form):
user=forms.CharField(max_length=32,label='用户名')
#widget = widgets.PasswordInput()前端密码密文显示
pwd=forms.CharField(max_length=32,label='密码',widget=widgets.PasswordInput())
r_pwd=forms.CharField(max_length=32,label='确认密码',widget=widgets.PasswordInput())
email=forms.EmailField(max_length=32,label='邮箱')
#使页面渲染时增加需要的属性
def __init__(self,*args,**kwargs):
super().__init__(*args,**kwargs)
for filed in self.fields.values():
filed.widget.attrs.update({'class':"form-control"})
#设置钩子,对相应的验证框添加新的验证规则(不一定会被执行)
def clean_user(self):
val=self.cleaned_data.get('user')
user=user_info.objects.filter(username=val).first()
if user:
raise ValidationError('用户已存在')
else:
return val
def clean_pwd(self):
val = self.cleaned_data.get('pwd')
if val.isdigit():
raise ValidationError('密码不能为纯数字')
else:
return val
def clean_email(self):
val=self.cleaned_data.get('email')
if re.search('\[email protected]$',val):
return val
else:
raise ValidationError('必须为163邮箱')
# 全局钩子,此方法一定会被执行
def clean(self):
pwd=self.cleaned_data.get('pwd')
r_pwd=self.cleaned_data.get('r_pwd')
if pwd and r_pwd and pwd!=r_pwd:
# raise ValidationError('密码不一致')
self.add_error('r_pwd',ValidationError('两次密码不一致'))
else:
return self.cleaned_data