基于modelforms组件实现注册功能

数据库部分

使用的是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

基于modelforms组件实现注册功能

相关推荐