注册页面

最新推荐文章于 2022-08-04 21:05:48 发布

SpecYue

最新推荐文章于 2022-08-04 21:05:48 发布

阅读量299

点赞数 1

分类专栏： BBS项目

本文链接：https://blog.csdn.net/qq_34788903/article/details/88383932

版权

BBS项目专栏收录该内容

18 篇文章 0 订阅

订阅专栏

定义表单forms.py

"""
bbs用到的form类
"""

from django import forms
from django.core.exceptions import ValidationError

# 定义一个注册的form类
class RegForm(forms.Form):
    username = forms.CharField(
        max_length=16,
        label="用户名",
        error_messages={
            "max_length": "用户名最长16位",
            "required": "用户名不能为空",
        },
        widget=forms.widgets.TextInput(
            attrs={"class": "form-control"},
        )
    )

    password = forms.CharField(
        min_length=6,
        label="密码",
        widget=forms.widgets.PasswordInput(
            attrs={"class": "form-control"},
            render_value=True,
        ),
        error_messages={
            "min_length": "密码至少要6位！",
            "required": "密码不能为空",
        }
    )

    re_password = forms.CharField(
        min_length=6,
        label="确认密码",
        widget=forms.widgets.PasswordInput(
            attrs={"class": "form-control"},
            render_value=True,
        ),
        error_messages={
            "min_length": "确认密码至少要6位！",
            "required": "确认密码不能为空",
        }
    )

    email = forms.EmailField(
        label="邮箱",
        widget=forms.widgets.EmailInput(
            attrs={"class": "form-control"},

        ),
        error_messages={
            "invalid": "邮箱格式不正确！",
            "required": "邮箱不能为空",
        }
    )


    # 重写全局的钩子函数，对确认密码做校验
    def clean(self):
        password = self.cleaned_data.get("password")
        re_password = self.cleaned_data.get("re_password")

        if re_password and re_password != password:
            self.add_error("re_password", ValidationError("两次密码不一致"))

        else:
            return self.cleaned_data

视图函数

from blog import forms
def register(request):
    #生成一个form对象
    form_obj = forms.RegForm()

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

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
</head>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/mystyle.css">
<body>
<div class="container">
    <div class="row">
        <div class=".col-md-8 col-md-offset-1">
            <form action="/reg/" method="post" class="form-horizontal reg-form">
                {% csrf_token %}
                <div class="form-group">
                    <label for="{{ form_obj.username.id_for_label }}"
                           class="col-sm-2 control-label">{{ form_obj.username.label }}</label>
                    <div class="col-sm-5">
                        {{ form_obj.username }}

                        <span id="helpBlock2" class="help-block"></span>
                    </div>
                </div>

                <div class="form-group">
                    <label for="{{ form_obj.password.id_for_label }}"
                           class="col-sm-2 control-label">{{ form_obj.password.label }}</label>
                    <div class="col-sm-5">
                        {{ form_obj.password }}

                        <span id="helpBlock2" class="help-block"></span>
                    </div>
                </div>

                <div class="form-group">
                    <label for="{{ form_obj.re_password.id_for_label }}"
                           class="col-sm-2 control-label">{{ form_obj.re_password.label }}</label>
                    <div class="col-sm-5">
                        {{ form_obj.re_password }}

                        <span id="helpBlock2" class="help-block"></span>
                    </div>
                </div>

                <div class="form-group">
                    <label for="{{ form_obj.email.id_for_label }}"
                           class="col-sm-2 control-label">{{ form_obj.email.label }}</label>
                    <div class="col-sm-5">
                        {{ form_obj.email }}

                        <span id="helpBlock2" class="help-block"></span>
                    </div>
                </div>

                <div class="form-group">
                    <label for="id_avatar"
                           class="col-sm-2 control-label">头像</label>
                    <div class="col-sm-5">
                        <label for="id_avatar"><img src="/static/img/default.png" alt="default_image"></label>
                        <input type="file" name="avatar" id="id_avatar" style="display: none">
                        <span id="helpBlock2" class="help-block"></span>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default">注册</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

注意的点:
1.首先要有csrf防护
2.以password为例

<div class="form-group">
                    <label for="{{ form_obj.re_password.id_for_label }}"
                           class="col-sm-2 control-label">{{ form_obj.re_password.label }}</label>
                    <div class="col-sm-5">
                        {{ form_obj.re_password }}

                        <span id="helpBlock2" class="help-block"></span>
                    </div>
                </div>

样式写法是从bootstrap上复制的label标签用来绑定点击form_obj.re_password.label的时候,去响应什么,这里绑定的是form_obj.re_password.id_for_label,所以效果就是,点击用户名之后后面的框会响应.
在这里插入图片描述

同理这个原理运用到了上传头像这里.把input上传file的的样式设置为none,就影藏了,然后用label去关联这个input.

 <label for="id_avatar"><img src="/static/img/default.png" alt="default_image"></label>
                        <input type="file" name="avatar" id="id_avatar" style="display: none">

SpecYue

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
注册页面

定义表单forms.py"""bbs用到的form类"""from django import formsfrom django.core.exceptions import ValidationError# 定义一个注册的form类class RegForm(forms.Form): username = forms.CharField( max_len...
复制链接

扫一扫

专栏目录