基于form组件的注册

时间：2020-04-16 19:28:01 收藏：0 阅读：57

基于form组件的注册

urls.py

from django.contrib import admin
from django.urls import path

from blog import views
urlpatterns = [
    path(‘admin/‘, admin.site.urls),

    #注册
    path(‘register/‘, views.register),
    

]

views.py

#注册视图函数
def register(request):
    form_obj = forms.RegForm()
    if request.method == "POST":
        form_obj = forms.RegForm(request.POST)
        #帮我做校验
        if form_obj.is_valid():
            #校验通过，去数据库创建一个新的用户
            # 所以经过校验的数据都保存在  form_obj.cleaned_data  (一个大 字典 中)
            # print(form_obj.cleaned_data)    #{‘name‘: ‘某某某‘, ‘pwd‘: ‘1234567‘, ‘re_pwd‘: ‘1234567‘}
            del form_obj.cleaned_data["re_password"]  # 删除字典中的 re_pwd 因为数据库中没有这个属性
            models.UserInfo.objects.create_user(**form_obj.cleaned_data)
            return HttpResponse("注册成功！")
        else:
            print(form_obj.errors)
            return HttpResponse("出错啦！")


    return render(request, ‘register.html‘,{"form_obj":form_obj})

register.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% load static %}
    <link rel="stylesheet" href="{% static ‘bootstrap/css/bootstrap.min.css‘ %}">
    <style>
        .container {
            margin-top: 100px;
        }
{#        头像图片#}
        #avatar_img {
            width: 80px;
            height: 50px;
        }
{#        隐藏选择图片的按钮#}
        #id_avatar {
            display: none;
        }
    </style>
</head>
<body>


<div class="container">
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <form action="" method="post" class="form-horizontal" enctype="multipart/form-data">
                {% csrf_token %}
{#                用户名#}
                <div class="form-group {% if form_obj.username.error.0 %}has-error{% endif %}">
                    <label class="col-sm-2 control-label"
                           for="{{ form_obj.username.id_for_label }}">{{ form_obj.username.label }}</label>
                    <div class="col-sm-10">
                        {{ form_obj.username }}
                        <span class="help-block">{{ form_obj.username.error.0 }}</span>
                    </div>
                </div>
{#                密码#}
                <div class="form-group {% if form_obj.password.error.0 %}has-error{% endif %}">
                    <label class="col-sm-2 control-label"
                           for="{{ form_obj.password.id_for_label }}">{{ form_obj.password.label }}</label>
                    <div class="col-sm-10">
                        {{ form_obj.password }}
                        <span class="help-block">{{ form_obj.password.error.0 }}</span>
                    </div>
                </div>
{#                确认密码#}
                <div class="form-group {% if form_obj.re_password.error.0 %}has-error{% endif %}">
                    <label class="col-sm-2 control-label"
                           for="{{ form_obj.re_password.id_for_label }}">{{ form_obj.re_password.label }}</label>
                    <div class="col-sm-10">
                        {{ form_obj.re_password }}
                        <span class="help-block">{{ form_obj.re_password.error.0 }}</span>
                    </div>
                </div>
{#                邮箱#}
                <div class="form-group {% if form_obj.email.error.0 %}has-error{% endif %}">
                    <label class="col-sm-2 control-label"
                           for="{{ form_obj.email.id_for_label }}">{{ form_obj.email.label }}</label>
                    <div class="col-sm-10">
                        {{ form_obj.email }}
                        <span class="help-block">{{ form_obj.email.error.0 }}</span>
                    </div>
                </div>
{#                头像   因为在forms.py中没有这个input选项，只能自己写#}
                <div class="form-group">
                    <label class="col-sm-2 control-label">头像</label>
                    <div class="col-sm-10">
{#                        实现了点击图片相当于点击 选择头像按钮#}
                        <label for="id_avatar"><img id="avatar_img" src="/static/img/girl.png" alt=""></label>
                        <input type="file" name="avatar" id="id_avatar">
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-2">
                        <input type="submit" value="注册" class="btn btn-success">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="{% static ‘jquery-3.2.1.min.js‘ %}"></script>
<script src="{% static ‘bootstrap/js/bootstrap.min.js‘ %}"></script>
</body>
</html>

自己写的forms.py

‘‘‘
BBS 用到的form类
‘‘‘

from django import forms

#定义一个注册的form类
class RegForm(forms.Form):
    username = forms.CharField(
        max_length=16,
        label="用户名",
        widget=forms.widgets.TextInput(
            attrs={"class": "form-control"}
        ),
        error_messages={
            "max_length":"用户名最长16位",
            "require":"用户名不能为空"
        }
    )
    password = forms.CharField(
        min_length=6,
        label="密码",
        error_messages={
            "min_length": "密码至少6位",
            "require": "密码不能为空"
        },
        widget=forms.widgets.PasswordInput(
            render_value=True,
            attrs={"class":"form-control"}
        )
    )
    re_password = forms.CharField(
        min_length=6,
        label="确认密码",
        error_messages={
            "require": "确认密码不能为空"
        },
        widget=forms.widgets.PasswordInput(
            render_value=True,
            attrs={"class": "form-control"}
        )
    )
    email = forms.EmailField(
        label="邮箱",
        error_messages={
            "require": "邮箱不能为空"
        },
        widget=forms.widgets.EmailInput(
            attrs={"class": "form-control"}
        )
    )

以上注册功能已经实现的差不多了，但是在选择头像时，选择的头像不会替换默认的图片

改进方法如下（一个新的知识点）：

#给选择图片的input标签绑定事件
<script>
    //找到头像的input标签，绑定change 事件
    $("#id_avatar").on("change",function () {
        //1.创建一个读文件的对象
        var filereader = new FileReader();
        //取到当前选中的头像文件
        console.log(this.files[0]);
        //读取你选中的文件
        filereader.readAsDataURL(this.files[0]);    //读文件是需要事件的（js是异步的）
        //实现等待功能
        filereader.onload = function () {
            //2.等上一步读完文件之后，把图片加载到img标签里面
            $("#avatar_img").attr("src",filereader.result);
        }


    })
</script>