zoukankan      html  css  js  c++  java
  • 使用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 中的文件:

  • 相关阅读:
    Linux内核RPC请求过程
    二分图
    Java实现 蓝桥杯 算法提高 合并石子
    Java实现 蓝桥杯 算法提高 合并石子
    Java实现 蓝桥杯 算法提高 摩尔斯电码
    Java实现 蓝桥杯 算法提高 摩尔斯电码
    Java实现 蓝桥杯 算法提高 文本加密
    Java实现 蓝桥杯 算法提高 文本加密
    Java蓝桥杯 算法提高 九宫格
    Java蓝桥杯 算法提高 九宫格
  • 原文地址:https://www.cnblogs.com/lx3822/p/9245201.html
Copyright © 2011-2022 走看看