1. 前端部分(引入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').val(),
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');
//对相应信息遍历显示在页面
$.each(res.err,function (i,j){
/**if(i=='__all__'){
$('#id_r_p').next().html(j[0]).css('color','red').parent().addClass('has-error');
}else{
$('#id_'+i).next().html(j[0]).css('color','red').parent().addClass('has-error');
}**/
//将错误信息显示在生成的span里
$('#id_'+i).next().html(j[0]).css('color','red').parent().addClass('has-error');
});
}
}
});
});
</script>
2. 后台python
2.1 对django组件中用户表字段的扩展
(1)在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)在setting中更改用户认证组件的表配置信息
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