注册功能页面的搭建

注册功能页面的搭建

思路分析

注册页面需要对用户提交的数据进行校验,并且需要对用户输入错误的地方进行提示!

所有我们需要使用forms组件搭建注册页面!

平时我们书写form是组件的时候是在views.py里面书写的,
但是为了接耦合,我们需要将forms组件都单独写在一个地方,需要用的时候导入就行!

例如,在项目文件夹下创建一个myforms文件夹,里面放各种forms组件文件:

	myforms文件夹
		regform.py
		loginform.py
		userform.py
		orderform.py

注册页面的效果图:
image

注册页面代码实现

1.编写注册页面的forms组件

from django import forms
from app01 import models


class RegisterForms(forms.Form):
    username = forms.CharField(label="用户名",max_length=8,min_length=3,error_messages={
        "required":"用户名不能为空",
        "max_length":"用户名最大8位",
        "min_length": "用户名最小8位",
    },
     widget= forms.widgets.TextInput(attrs={"class":"form-control"}),
   )

    password = forms.CharField(label="密码",max_length=8,min_length=3,error_messages={
        "required":"密码不能为空",
        "max_length":"密码最大8位",
        "min_length": "密码最小8位",
    },
     widget= forms.widgets.PasswordInput(attrs={"class":"form-control"}),
   )
    confirm_password = forms.CharField(label="确认密码", max_length=8, min_length=3, error_messages={
        "required": "确认密码不能为空",
        "max_length": "确认密码最大8位",
        "min_length": "确认密码最小8位",
    },
    widget=forms.widgets.PasswordInput(attrs={"class": "form-control"}),
    )
    email = forms.EmailField(label="邮箱",error_messages={
        "required":"邮箱不能为空",
        "invalid":"邮箱格式不正确",
    },
    widget=forms.widgets.EmailInput(attrs={"class":"form-control"})
                            )

    # 钩子函数
    def clean_username(self):
        username = self.cleaned_data.get("username")
        is_exist = models.UserInfo.objects.filter(username=username)
        if is_exist:
            self.add_error("username","该用户名已存在")
        return username

    def clean(self):
        password = self.cleaned_data.get("password")
        confirm_password = self.cleaned_data.get("confirm_password")
        if password != confirm_password:
            self.add_error("confirm_password","两次密码不一致")
        return self.cleaned_data

2.将注册页面的forms组件传入views.py里,然后渲染到前端页面

from app01.myforms import RegisterForms
def register(request):
    form_obj = RegisterForms() # 生产一个空的form_obj对象,然后传入前端就可以渲染出html页面
    return render(request,"register.html",locals())

3.forms组件在前端渲染的第三种方式

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <h3 class="text-center">注册</h3>
            <form id="myform">  <!--注意这里不用form表单提交数据,用form标签只是为了后面的序列化表单分便取出数据-->
            {% csrf_token %}
                {% for form in form_obj %}
                    <div class="form-group">
					
                        <label for="{{ form.auto_id }}">{{ form.label }}:</label>
                        {{ form }}
                        <span style="color: red">{{ form.error.0 }}</span>
                    </div>
                {% endfor %}
                <div class="form-group">
                    <label for="myfile">头像: &nbsp;<img src="/static/img/default.png" alt="" width="100px">
                    </label>
                    <input type="file" id="myfile" style="display: none">
                </div>
                <input type="button" class="btn btn-primary pull-right" value="提交" id="id_commit">
            </form>
        </div>
    </div>
</div>

4.用户头像动态展示:用到的是一个图片阅读器对象

    // 用户头像动态展示:给头像文件框绑定一个文本域变化事件,当文本域变化时动态展示图片
    $("#myfile").change(function (){
        // 1.先生成一个文件阅读器对象,用于读取头像和存储头像
        let fileReaderObj = new FileReader();
        // 2.获取头像对象
        let fileObj = $("#myfile")[0].files[0];
        // 3.利用文件阅读器对象读取头像
        // 注意:这一步是异步操作,也是IO操作,意味着我还没有读取完毕就往下执行了,所以fileReaderObj.result没有任何结果,因此需要使用预加载,等第3步执行完毕在执行第4步
        fileReaderObj.readAsDataURL(fileObj);
        // 4.利用文件阅读器对象将头像展示到前端页面  即:修改img标签里的src属性
        fileReaderObj.onload = function (){
            $("#myimg").attr("src",fileReaderObj.result)
        };
    })

5.向后端提交用户数据:用到了表单序列化方法取到用户数据和jquery查找方法,得到对应input的id值渲染文本和样式

    // 向后端提交用户数据
    $("#id_commit").click(function (){
        let formData = new FormData();
        let formDataObj = $("#myform").serializeArray();
        $.each(formDataObj,function (index,obj){
            formData.append(obj.name,obj.value)
        });
        formData.append("file",$("#myfile")[0].files[0]);
        $.ajax({
            type:"post",
            url:"",
            data:formData,
            contentType:false,
            processData:false,
            success:function (args){
                if (args.code==1000){
                    window.location.href = args.url
                }else{
                    // 找到对应span标签,渲染上错误信息
                    // 先来看下错误信息的格式和对应input标签的id
                    $.each(args.msg,function (index,obj){
                        // index是对应的字段名,obj是对应的错误信息列表
                        // 得到目标的input的id值
                        let targetID = "#id_" + index;
                        $(targetID).next().text(obj[0]).parent().addClass("has-error")
                    })
                }
            }
        })
    })

6.聚焦事件:当鼠标聚焦到对应input框时,取消对应标签的文本和样式

    // 当鼠标聚焦到input框时,取消input的has-error样式和错误提示文本
    $("input").focus(function (){
        $(this).next().text("").parent().removeClass("has-error")
    })

原文地址:https://www.cnblogs.com/suncolor/archive/2022/10/06/16751479.html