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 中的文件:

  • 相关阅读:
    xpath json操作符说明
    搜索引擎下拉词接口
    利用jsonp调用外部ip地址池
    excel支持正则表达式提取字符函数(支持RegExp捕获分组)
    【竞价网站绝技】根据访客ip,页面显示访客所属城市的html代码(借用YY IP地址库)
    关于百度信息流“霸屏”代码(着落页点击浏览器“回退”按钮还是在官网)的实现。
    关于免费虚拟主机sanfengyun
    typescript interface接口
    typescript 声明和解构
    typescript 基础数据类型
  • 原文地址:https://www.cnblogs.com/lx3822/p/9245201.html
Copyright © 2011-2022 走看看