Django的内置组件form
1、from 组件的介绍
-对用户请求的数据进行校验
关于校验
1.前端通过JS代码做校验(最好有)
2.后端做检验(必须要有 因为前端的检验可以被跳过)
-生成HTML标签
之前的web开发模式中,以注册为例:
1.首先要有一个注册的页面,页面里面要有form表单(生成HTML页面)
2.form表单要能提交数据到后端,后端要做有效性校验
3.把校验的提示信息展示在页面上(保持要来填写的内容)
2.form组件的用法
2.1
# 在views.py文件中导入forms模块 from django import forms
from django.forms import widgets
# 正则校验模块
from django.core.validators import RegexValidator
from django.core.exceptions import ValidationError
# 定义一个form类
class RegForm(forms.Form):
2.2常用字段和插件
字段:用于对用户请求数据的验证
插件:用于自动生成HTML
# initial 初始值,input框里面的初始值 name = forms.CharField( # 校验规则相关 max_length=16, label="用户名:", initial="张三", # 设置默认值 # 重写错误信息 error_messages={ "required": "该字段不能为空", # "invalid": "格式错误", }, # widget控制的是生成html代码相关的 widget=widgets.TextInput(attrs={"class": "form-control n1", "name": "name"}) ) # password pwd = forms.CharField( min_length=6, max_length=12, label="密码", widget=widgets.PasswordInput(attrs={'class': "form-control "}, render_value=True), error_messages={ "min_length": "密码不能少于6位!", "max_length": "密码最长12位!", "required": "该字段不能为空", } ) re_pwd = forms.CharField( min_length=6, max_length=12, label="确认密码", widget=widgets.PasswordInput(attrs={'class': "form-control "}, render_value=True), error_messages={ "min_length": "密码不能少于6位!", "max_length": "密码最长12位!", "required": "该字段不能为空", } ) email = forms.EmailField( label="邮箱", max_length=17, widget=widgets.EmailInput(attrs={'class': "form-control"}), error_messages={ "required": "该字段不能为空", } ) # radioSelect 单radio为字符串 gender = forms.ChoiceField( choices=((1, "男"), (2, "女"), (3, "保密")), label="性别", initial=1, widget=forms.widgets.RadioSelect ) # 单选的select hobby = forms.ChoiceField( choices=((1, "篮球"), (2, "足球"), (3, "双色球"),), label="爱好", initial=3, widget=forms.widgets.Select ) # 多选的select hobby2 = forms.MultipleChoiceField( choices=((1, "篮球"), (2, "足球"), (3, "双色球"),), label="爱好", initial=[1, 3], widget=forms.widgets.SelectMultiple() ) # 单选的checkBox keep = forms.ChoiceField( label="是否记住密码", initial="checked", widget=forms.widgets.CheckboxInput ) # 多选的checkBox hobby3 = forms.MultipleChoiceField( choices=((1, "篮球"), (2, "足球"), (3, "双色球"),), label="爱好", initial=[1, 3], widget=forms.widgets.CheckboxSelectMultiple(attrs={"class": "c1"}) ) mobile = forms.CharField( label="手机号", # 自己定制校验规则 validators=[RegexValidator(r'[0-9]+$', '手机号必须是数字'), RegexValidator(r'1[3-9][0-9]{9}$', '手机号格式有误')], widget=widgets.TextInput(attrs={'class': "form-control"}), error_messages={"required": "该字段不能为空", }) city = forms.ChoiceField( label="城市", initial=2, widget=forms.widgets.Select, choices=models.City.objects.all().values_list("id", "name"))
生成HTML:
2.3. 实例化一个form对象, 传递到模板语言中
def reg2(request): form_obj = RegForm()
.... return render(request, "reg2.html", {"form_obj": form_obj})
2.4. 在目标语言中调用form对象的响应方法和属性
三种方式:
1.
{#<form action="/reg2/" method="post" novalidate>#} {# {% csrf_token %}#} {# {{ form_obj.as_p }}#} {# {{ form_obj.errors.pwd }}#} {# <p><input type="submit"></p>#} {#</form>#}
2. <!-- 自己逐个字段写 -->
<div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> {#novalidate 禁用浏览器自身的校验#} <form action="/form/reg2/" method="post" novalidate> {% csrf_token %} {#用户名#} <div class="form-group {% if form_obj.name.errors.0 %}has-error{% endif %}"> {{ form_obj.name.label }} {{ form_obj.name }} <span id="s1"></span> <span class="help-block">{{ form_obj.name.errors.0 }}</span> </div> {#密码#} <div class="form-group {% if form_obj.pwd.errors.0 %}has-error{% endif %}"> {{ form_obj.pwd.label }} {{ form_obj.pwd }} <span class="help-block">{{ form_obj.pwd.errors.0 }}</span> </div> {#确认密码#} <div class="form-group {% if form_obj.re_pwd.errors.0 %}has-error{% endif %}"> {{ form_obj.re_pwd.label }} {{ form_obj.re_pwd }} <span class="help-block">{{ form_obj.re_pwd.errors.0 }}</span> </div> {#邮箱#} <div class="form-group {% if form_obj.email.errors.0 %}has-error{% endif %}"> {{ form_obj.email.label }} {{ form_obj.email }} <span class="help-block">{{ form_obj.email.errors.0 }}</span> </div> {#手机号#} <div class="form-group {% if form_obj.mobile.errors.0 %}has-error{% endif %}"> {{ form_obj.mobile.label }} {{ form_obj.mobile }} <span class="help-block">{{ form_obj.mobile.errors.0 }}</span> </div> {#城市#} <div class="form-group {% if form_obj.city.errors.0 %}has-error{% endif %}"> {{ form_obj.city.label }} {{ form_obj.city }} <span class="help-block">{{ form_obj.city.errors.0 }}</span> </div> <div class="form-group"> <input type="submit" class="btn btn-default" value="注册"> </div> </form> </div> </div> </div>
2.5 做校验:
1. form_obj = RegForm(request.POST)
2. form_obj.is_valid()
def reg2(request): form_obj = RegForm() if request.method == "POST": form_obj = RegForm(request.POST) # 让form帮我们做校验 if form_obj.is_valid(): # 校验通过 # 把数据存到数据库 # 所有经过校验的数据都保存在 form_obj.cleaned_data print(form_obj.cleaned_data) del form_obj.cleaned_data["re_pwd"] models.UserInfo.objects.create(**form_obj.cleaned_data) return HttpResponse("注册成功!") print(form_obj.errors["__all__"][0]) print(form_obj.errors["re_pwd"]) return render(request, "reg2.html", {"form_obj": form_obj})
2.6内置的正则校验器的使用
mobile = forms.CharField( label="手机号", # 自己定制校验规则 validators=[ RegexValidator(r'[0-9]+$', '手机号必须是数字'), RegexValidator(r'1[3-9][0-9]{9}$', '手机号格式有误') ], widget=widgets.TextInput(attrs={'class': "form-control"}), error_messages={ "required": "该字段不能为空", } )