使用form 组件写一个用户注册,并用 bootstrap渲染

需求:使用form组件,写一个用户注册系统,包含用户名, 密码, 确认密码,手机号,性别,爱好,注册。并用bootsrap渲染,成果如下:

 

首先创建一个django 项目。然后在连接pymysql数据库。

     

 

 配置好后,可以开始:

在app01 中添加一个forms.py :

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


class RegForm(forms.Form):
    username = forms.CharField(
        min_length= 6,
        label="用户名",
        error_messages={
            "required":"不能为空",
            "min_length":"用户名最少6位"
        },
        widget=forms.widgets.TextInput(attrs={"class":"form-control","placeholder":"用户名"})
    )
    pwd = forms.CharField(
        min_length=3,
        label="密码",
        error_messages={
            "required":"不能为空",
            "min_length":"密码最少3位"
        },
        widget=forms.widgets.PasswordInput(
            attrs={"class":"form-control","plaaceholder":"密码"},
            render_value=True
        )
    )
    re_pwd = forms.CharField(
        min_length=3,
        label="确认密码",
        error_messages={
            "required":"不能为空",
            "min_length":"密码最少3位"
        },
        widget=forms.widgets.PasswordInput(
            attrs={"class":"form-control","placeholder":"确认密码"},
            render_value=True
        )
    )
    phone = forms.CharField(
        label="手机号",
        min_length=11,
        max_length=11,
        error_messages={
            "required": "手机号不能为空",
            "min_length": "手机号应该是11位",
            "max_length": "手机号应该是11位",
        },
        validators=[RegexValidator(r'^1[356789][0-9]{9}$', "手机格式不正确"), ],
        widget=forms.widgets.TextInput(attrs={"class": "form-control", "placeholder": "手机号"})
    )
    gender = forms.fields.ChoiceField(
        choices=((1,""),(2,""),(3,"保密")),
        label="性别",
        initial=3,
        widget=forms.widgets.RadioSelect
    )
    hobby = forms.fields.MultipleChoiceField(
        choices=((1, "篮球"), (2, "足球"), (3, "双色球"),),
        label="爱好",
        required=False,
        widget=forms.widgets.CheckboxSelectMultiple
    )


    def clean_username(self):
        value = self.cleaned_data.get("username")
        if "红楼梦" in value:
            raise ValidationError("不符合社会主义核心价值观")
        else:
            return value


    def clean(self):
        pwd = self.cleaned_data.get("pwd")
        re_pwd = self.cleaned_data.get("re_pwd")

        if pwd !=re_pwd:
            self.add_error("re_pwd","两次输入的密码不一致!")
            raise ValidationError("两次输入的密码不一致")
        else:
            return self.cleaned_data
forms.py

 

在url 中写入与浏览器交互关系:

views中:

from django.shortcuts import render,HttpResponse
from app01 import forms

# Create your views here.



def reg(request):
    from_obj = forms.RegForm()
    if request.method == "POST":
        from_obj = forms.RegForm(request.POST)
        if from_obj.is_valid():
            return HttpResponse("OK")

    return render(request, "reg.html", {"obj": from_obj})
views.py

reg.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <form class="form-horizontal" autocomplete="off" novalidate action="/reg/" method="post">
                {% csrf_token %}
                <div class="form-group">
                    <label for="{{ obj.username.id_for_label }}" class="col-md-2 control-label">{{ obj.username.label }}</label>
                    <div class="col-md-10">
                        {{ obj.username }}
                        <span class="help-block">{{ obj.username.errors.0 }}</span>
                    </div>
                </div>

                <div class="form-group">
                    <label for="{{ obj.pwd.id_for_label }}" class="col-md-2 control-label">{{ obj.pwd.label }}</label>
                    <div class="col-md-10">
                        {{ obj.pwd }}
                        <span class="help-block">{{ obj.pwd.errors.0 }}</span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="{{ obj.re_pwd.id_for_label }}" class="col-md-2 control-label">{{ obj.re_pwd.label }}</label>
                    <div class="col-md-10">
                        {{ obj.re_pwd }}
                        <span class="help-block">{{ obj.re_pwd.errors.0 }}</span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="{{ obj.phone.id_for_label }}" class="col-md-2 control-label">{{ obj.phone.label }}</label>
                    <div class="col-md-10">
                        {{ obj.phone }}
                        <span class="help-block">{{ obj.phone.errors.0 }}</span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="{{ obj.gender.id_for_label }}" class="col-md-2 control-label">{{ obj.gender.label }}</label>
                    <div class="col-md-10">
                        {{ obj.gender }}
                        <span class="help-block">{{ obj.gender.errors.0 }}</span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="{{ obj.hoppy.id_for_label }}" class="col-md-2 control-label">{{ obj.hoppy.label }}</label>
                    <div class="col-md-10">
                        {{ obj.hoppy }}
                        <span class="help-block">{{ obj.hoppy.errors.0 }}</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>

</body>
</html>
reg.html

 

 其中static 中的文件:

 

posted @ 2018-06-29 20:23  C3的脚印  阅读(864)  评论(0编辑  收藏  举报