数据库部分
使用的是auth_user表，添加r_pwd字段后表名变为UserInfo
from django.db import models
from django.contrib.auth.models import AbstractUser
class UserInfo(AbstractUser):
r_pwd=models.CharField(max_length=32)
modelforms 类 需要自己建立,然后需要引
from django.forms import ModelForm
from app01.models import UserInfo
from django.core.exceptions import NON_FIELD_ERRORS, ValidationError #认证错误
import re
from django.forms import widgets as wig
class UserModelForm(ModelForm):
# r_pwd = forms.CharField(min_length=5, widget=widgets.PasswordInput(), label="确认密码") #外接字段，数据库中没有的字段
class Meta:
model=UserInfo
fields=["username","password","r_pwd","email"]
labels={
"username":"用户名",
"password":"密码",
"r_pwd":"确认密码",
"email":"邮箱"
}
widgets={
"password":wig.PasswordInput(attrs={"type":"password"}),
"r_pwd":wig.PasswordInput(attrs={"type":"password"})
}
# error_messages = {
# "username":"用户名格式错误",
# "password":"密码格式错误",
# }
error_messages = {
'username': {'required': "用户名不能为空", },
'password': {'required': "密码不能为空", },
}
# 注册的用户不能和数据库中的重复
def clean_username(self):
val=self.cleaned_data.get("username")
user=UserInfo.objects.filter(username=val)
if user:
raise ValidationError("用户已存在")
else:
return val
#密码不能纯数字
def clean_password(self):
val=self.cleaned_data.get("password")
if val.isdigit():
raise ValidationError("密码不能是纯数字")
else:
return val
def clean_email(self):
val=self.cleaned_data.get("email")
if re.search("w+@qq.com$",val):
return val
else:
raise ValidationError("邮箱必须是qq邮箱")
def clean(self):
pwd=self.cleaned_data.get("password")
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
def __init__(self, *args, **kwargs):#相当于修改forms类的__init__方法
super().__init__(*args, **kwargs) #走父类的这个方法
for filed in self.fields.values(): #循环每个字段对象
# filed.error_messages={"required":"不能为空"}
filed.widget.attrs.update({'class': 'form-control'}) #对每个属性添加一个类
url 配置
path('reg_modelform/', views.reg_modelform,name='reg_modelform'),#modelform注册
views配置
################################ 基于modelforms的注册##########################################################################
from app01.modelforms import UserModelForm
def reg_modelform(request):
if request.method=="GET":
form=UserModelForm()
return render(request,'reg_mf.html',locals())
else:
form = UserModelForm(request.POST)
print(request.POST)
response = {"user": None, "err_msg": ""}
if form.is_valid():
response["user"]=form.cleaned_data.get("username")
form.save()
else:
print(form.errors)
response['err_msg']=form.errors
return JsonResponse(response)
前段页面配置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆页面</title>
<link rel="stylesheet" href="/static/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script type="text/javascript" src="/static/jquery/jquery.3.3.1.js"></script>
<link rel="stylesheet" href="/static/css/logincss.css">
</head>
<body>
{# 壁纸##############}
<div class="wraper"></div>
{############内容#################################}
<div class="container boy">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<form action="" method="post">
{% csrf_token %}
{% for field in form %}
<div class="form-group">
<label for="">{{ field.label }}</label>
{{ field }}
<p class="error pull-right">{{ field.errors.0 }}</p>
</div>
{% endfor %}
<input type="reset" class="btn btn-primary" value="重置">
<input type="button" class="btn btn-primary pull-right reg_btn" value="确认">
</form>
</div>
</div>
</div>
<script>
$('.reg_btn').click(function () {
$.ajax({
url:'',
type:'post',
data:{
user:$("#id_username").val(), //id_username注意名字别写错了
pwd:$("#id_password").val(),
r_pwd:$("#id_r_pwd").val(),
email:$("#id_email").val(),
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
},
success:function (response) {
if(response.user){
{#注册成功#}
location.href="/login/";
}else{
{#清除旧的错误#}
$('.error').html("");
$(".form-group").removeClass("has-error");
{#展示新的错误#}
{#循环把错误信息放到相应位置#}
$.each(response.err_msg,function (i,j) {
console.log(i,j);
if (i=="__all__"){ //__all__是第二层校验时产生的全局错误
$("#id_r_pwd").next().html(j[0]);
}else{
$("#id_"+i).next().html(j[0]).css("color","red").parent().addClass("has-error");
{#has-error有错误外框显红的效果#}
}
})
}
}
})
})
</script>
</body>
</html>
reg_mf.html