使用form 组件写一个用户注册,并用 bootstrap渲染
需求:使用form组件,写一个用户注册系统,包含用户名, 密码, 确认密码,手机号,性别,爱好,注册。并用bootsrap渲染,成果如下:
首先创建一个django 项目。然后在连接pymysql数据库。
配置好后,可以开始:
在app01 中添加一个forms.py :
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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
在url 中写入与浏览器交互关系:
views中:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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})
reg.html:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
其中static 中的文件: