Django form表单 组件
Django form表单 组件
目录
Form 组件介绍
"""
我们之前在HTML页面中利用form表单向后端提交数据时，都会写一些获取用户输入的标签并且用form标签把它们包起来。
与此同时我们在好多场景下都需要对用户的输入做校验，比如校验用户是否输入，输入的长度和格式等正不正确。
如果用户输入的内容有错误就需要在页面上相应的位置显示对应的错误信息.
"""
Django form组件就实现了上面所述的功能。
总结一下，其实form组件的主要功能如下:
- 生成页面可用的HTML标签
- 对用户提交的数据进行校验
- 保留上次输入内容
普通方式手写注册功能
- views.py
# 注册
def register(request):
error_msg = ""
if request.method == "POST":
username = request.POST.get("name")
pwd = request.POST.get("pwd")
# 对注册信息做校验
if len(username) < 6:
# 用户长度小于6位
error_msg = "用户名长度不能小于6位"
else:
# 将用户名和密码存到数据库
return HttpResponse("注册成功")
return render(request, "register.html", {"error_msg": error_msg})
- login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<form action="/reg/" method="post">
{% csrf_token %}
<p>
用户名:
<input type="text" name="name">
</p>
<p>
密码：
<input type="password" name="pwd">
</p>
<p>
<input type="submit" value="注册">
<p style="color: red">{{ error_msg }}</p>
</p>
</form>
</body>
</html>
使用form组件实现注册功能
#form组件的功能
1. 生产input标签
2. 对提交的数据可以进行校验
3. 提供错误提示
- views.py
- 先定义好一个RegForm类：
#基本格式
from django import forms #导入组件模块
# 按照Django form组件的要求自己写一个类
class RegForm(forms.Form):
name = forms.CharField(label="用户名")
pwd = forms.CharField(label="密码")
- 再写一个视图函数：
# 使用form组件实现注册方式
def register2(request):
form_obj = RegForm()
if request.method == "POST":
# 实例化form对象的时候，把post提交过来的数据直接传进去
form_obj = RegForm(request.POST)
# 调用form_obj校验数据的方法
if form_obj.is_valid():
return HttpResponse("注册成功")
return render(request, "register2.html", {"form_obj": form_obj})
-
login2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册2</title>
</head>
<body>
<form action="/reg2/" method="post" novalidate autocomplete="off">
{% csrf_token %}
<div>
<label for="{{ form_obj.name.id_for_label }}">{{ form_obj.name.label }}</label>
{{ form_obj.name }} {{ form_obj.name.errors.0 }}
</div>
<div>
<label for="{{ form_obj.pwd.id_for_label }}">{{ form_obj.pwd.label }}</label>
{{ form_obj.pwd }} {{ form_obj.pwd.errors.0 }}
</div>
<div>
<input type="submit" class="btn btn-success" value="注册">
</div>
</form>
</body>
</html>
看网页效果发现 也验证了form的功能：
• 前端页面是form类的对象生成的 -->生成HTML标签功能
• 当用户名和密码输入为空或输错之后 页面都会提示 -->用户提交校验功能
• 当用户输错之后 再次输入 上次的内容还保留在input框 -->保留上次输入内容
Form 常用字段与插件
常用字段(必备)
CharField #字符串
ChoiceField #选择方式
MultipleChoiceField#多选
字段参数(必备)
required=True, 是否允许为空(必填/可填)
widget=None, HTML插件
label=None, 用于生成Label标签或显示内容
initial=None, 初始值
error_messages=None, 错误信息 {'required': '不能为空', 'invalid': '格式错误'}
validators=[], 自定义验证规则
disabled=False, 是否可以编辑
内置验证(必备)
required=True #True必填项 False可以不填
min_length #最小填入长度
max_length #最大填入长度
自定义效验器
#内置校验无法满足需求时可以自定义效验器
#写函数
def checkname(value):
# 通过校验规则 不做任何操作
# 不通过校验规则 抛出异常
if '草泥马' in value:
raise ValidationError('不符合社会主义核心价值观')
钩子函数
- 局部钩子 (只对一个指定字段进行效验)
def clean_字段名(self):
# 局部钩子
# 通过校验规则 必须返回当前字段的值
# 不通过校验规则 抛出异常
v = self.cleaned_data.get('字段名')
if '草泥马' in v:
raise ValidationError('不符合社会主义核心价值观')
else:
return v
- 全局钩子
def clean(self):
# 全局钩子
# 通过校验规则 必须返回当前所有字段的值
# 不通过校验规则 抛出异常 '__all__'
pwd = self.cleaned_data.get('pwd')
re_pwd = self.cleaned_data.get('re_pwd')
if pwd == re_pwd:
return self.cleaned_data
else:
#self.add_error("re_pwd","两次密码不一致") #自定义报错信息显示
raise ValidationError('两次密码不一致')
is_valid的流程
- 1 执行full_clean()的方法：
- 定义错误字典
- 定义存放清洗数据的字典
- 2 执行_clean_fields方法：
- 循环所有的字段
- 获取当前的值进行校验 （ 内置校验规则 自定义校验器）
- 通过校验
- self.cleaned_data[name] = value
- 如果有局部钩子，执行进行校验：
- 通过校验——》 self.cleaned_data[name] = value
- 不通过校验——》 self._errors 添加当前字段的错误 并且 self.cleaned_data中当前字段的值删除掉
- 没有通过校验
- self._errors 添加当前字段的错误
- 3 执行全局钩子clean方法
#先来归纳一下整个流程
#（1）首先is_valid()起手，看seld.errors中是否值，只要有值就是flase
#（2）接着分析errors.里面判断_errors是都为空，如果为空返回self.full_clean()，否则返回self._errors
#（3）现在就要看full_clean()，是何方神圣了，里面设置_errors和cleaned_data这两个字典，一个存错误字段，一个存储正确字段。
#（4）在full_clean最后有一句self._clean_fields()，表示校验字段
#（5）在_clean_fields函数中开始循环校验每个字段，真正校验字段的是field.clean(value)，怎么校验的不管
#（6）在_clean_fields中可以看到，会将字段分别添加到_errors和cleaned_data这两个字典中
#（7）结尾部分还设置了钩子，找clean_XX形式的，有就执行。执行错误信息也会添加到_errors中
#（8）整个校验过程完成
Form类 主要【字段】 和 【插件】
-
创建Form类时，主要涉及到 【字段】 和 【插件】，字段用于对用户请求数据的验证，插件用于自动生成HTML
-
initial 初始值
#input框里面的初始值。
class LoginForm(forms.Form):
username = forms.CharField(
min_length=8,
label="用户名",
initial="张三" # 设置默认值
)
pwd = forms.CharField(min_length=6, label="密码")
-
error_messages 重写错误信息
class LoginForm(forms.Form):
username = forms.CharField(
min_length=8,
label="用户名",
initial="张三",
error_messages={
"required": "不能为空",
"invalid": "格式错误",
"min_length": "用户名最短8位"
}
)
pwd = forms.CharField(min_length=6, label="密码")
-
password (页面input type ='password') 密码显示
class LoginForm(forms.Form):
...
pwd = forms.CharField(
min_length=6,
label="密码",
widget=forms.widgets.PasswordInput(attrs={'class': 'c1'}, render_value=True)
)
-
radioSelect 单radio值为字符串
class LoginForm(forms.Form):
username = forms.CharField(
min_length=8,
label="用户名",
initial="张三",
error_messages={
"required": "不能为空",
"invalid": "格式错误",
"min_length": "用户名最短8位"
}
)
pwd = forms.CharField(min_length=6, label="密码")
gender = forms.fields.ChoiceField(
choices=((1, "男"), (2, "女"), (3, "保密")),
label="性别",
initial=3,
widget=forms.widgets.RadioSelect()
)
-
单选Select
class LoginForm(forms.Form):
...
hobby = forms.fields.ChoiceField(
choices=((1, "篮球"), (2, "足球"), (3, "双色球"), ),
label="爱好",
initial=3,
widget=forms.widgets.Select()
)
-
多选Select
class LoginForm(forms.Form):
...
hobby = forms.fields.MultipleChoiceField(
choices=((1, "篮球"), (2, "足球"), (3, "双色球"), ),
label="爱好",
initial=[1, 3],
widget=forms.widgets.SelectMultiple()
)
-
单选checkbox
class LoginForm(forms.Form):
...
keep = forms.fields.ChoiceField(
label="是否记住密码",
initial="checked",
widget=forms.widgets.CheckboxInput()
)
-
多选checkbox
class LoginForm(forms.Form):
...
hobby = forms.fields.MultipleChoiceField(
choices=((1, "篮球"), (2, "足球"), (3, "双色球"),),
label="爱好",
initial=[1, 3],
widget=forms.widgets.CheckboxSelectMultiple()
)
关于choice的注意事项：
在使用选择标签时，需要注意choices的选项可以从数据库中获取，但是由于是静态字段'获取的值无法实时更新'，
那么需要自定义构造方法从而达到此目的。
-
实时刷新 方法一
from django.forms import Form
from django.forms import widgets
from django.forms import fields
class MyForm(Form):
user = fields.ChoiceField(
# choices=((1, '上海'), (2, '北京'),),
initial=2,
widget=widgets.Select
)
def __init__(self, *args, **kwargs):
super(MyForm,self).__init__(*args, **kwargs)
# self.fields['user'].choices = ((1, '上海'), (2, '北京'),)
# 或
self.fields['user'].choices = models.Classes.objects.all().values_list('id','caption')
-
实时刷新 方法二
from django import forms
from django.forms import fields
from django.forms import models as form_model
class FInfo(forms.Form):
authors = form_model.ModelMultipleChoiceField(queryset=models.NNewType.objects.all()) # 多选
# authors = form_model.ModelChoiceField(queryset=models.NNewType.objects.all()) # 单选
Django Form所有内置字段
Field
required=True, 是否允许为空
widget=None, HTML插件
label=None, 用于生成Label标签或显示内容(默认页面显示字段名,首字母大写)
initial=None, 初始值
help_text='', 帮助信息(在标签旁边显示)
error_messages=None, 错误信息 {'required': '不能为空', 'invalid': '格式错误'}
validators=[], 自定义验证规则
localize=False, 是否支持本地化
disabled=False, 是否可以编辑
label_suffix=None Label内容后缀
CharField(Field)
max_length=None, 最大长度
min_length=None, 最小长度
strip=True 是否移除用户输入空白
IntegerField(Field)
max_value=None, 最大值
min_value=None, 最小值
FloatField(IntegerField)
...
DecimalField(IntegerField)
max_value=None, 最大值
min_value=None, 最小值
max_digits=None, 总长度
decimal_places=None, 小数位长度
BaseTemporalField(Field)
input_formats=None 时间格式化
DateField(BaseTemporalField) 格式：2015-09-01
TimeField(BaseTemporalField) 格式：11:12
DateTimeField(BaseTemporalField)格式：2015-09-01 11:12
DurationField(Field) 时间间隔：%d %H:%M:%S.%f
...
RegexField(CharField)
regex, 自定制正则表达式
max_length=None, 最大长度
min_length=None, 最小长度
error_message=None, 忽略，错误信息使用 error_messages={'invalid': '...'}
EmailField(CharField)
...
FileField(Field)
allow_empty_file=False 是否允许空文件
ImageField(FileField)
...
注：需要PIL模块，pip3 install Pillow
以上两个字典使用时，需要注意两点：
- form表单中 enctype="multipart/form-data"
- view函数中 obj = MyForm(request.POST, request.FILES)
URLField(Field)
...
BooleanField(Field)
...
NullBooleanField(BooleanField)
...
ChoiceField(Field)
...
choices=(), 选项，如：choices = ((0,'上海'),(1,'北京'),)
required=True, 是否必填
widget=None, 插件，默认select插件
label=None, Label内容
initial=None, 初始值
help_text='', 帮助提示
ModelChoiceField(ChoiceField)
... django.forms.models.ModelChoiceField
queryset, # 查询数据库中的数据
empty_label="---------", # 默认空显示内容
to_field_name=None, # HTML中value的值对应的字段
limit_choices_to=None # ModelForm中对queryset二次筛选
ModelMultipleChoiceField(ModelChoiceField)
... django.forms.models.ModelMultipleChoiceField
TypedChoiceField(ChoiceField)
coerce = lambda val: val 对选中的值进行一次转换
empty_value= '' 空值的默认值
MultipleChoiceField(ChoiceField)
...
TypedMultipleChoiceField(MultipleChoiceField)
coerce = lambda val: val 对选中的每一个值进行一次转换
empty_value= '' 空值的默认值
ComboField(Field)
fields=() 使用多个验证，如下：即验证最大长度20，又验证邮箱格式
fields.ComboField(fields=[fields.CharField(max_length=20), fields.EmailField(),])
MultiValueField(Field)
PS: 抽象类，子类中可以实现聚合多个字典去匹配一个值，要配合MultiWidget使用
SplitDateTimeField(MultiValueField)
input_date_formats=None, 格式列表：['%Y--%m--%d', '%m%d/%Y', '%m/%d/%y']
input_time_formats=None 格式列表：['%H:%M:%S', '%H:%M:%S.%f', '%H:%M']
FilePathField(ChoiceField) 文件选项，目录下文件显示在页面中
path, 文件夹路径
match=None, 正则匹配
recursive=False, 递归下面的文件夹
allow_files=True, 允许文件
allow_folders=False, 允许文件夹
required=True,
widget=None,
label=None,
initial=None,
help_text=''
GenericIPAddressField
protocol='both', both,ipv4,ipv6支持的IP格式
unpack_ipv4=False 解析ipv4地址，如果是::ffff:192.0.2.1时候，可解析为192.0.2.1， PS：protocol必须为both才能启用
SlugField(CharField) 数字，字母，下划线，减号（连字符）
...
UUIDField(CharField) uuid类型
校验 (内置正则)
from django.forms import Form
from django.forms import widgets
from django.forms import fields
from django.core.validators import RegexValidator
class MyForm(Form):
user = fields.CharField(
validators=[RegexValidator(r'^[0-9]+$', '请输入数字'), RegexValidator(r'^159[0-9]+$', '数字必须以159开头')],
)
-
效验(自定义效验 )
import re
from django.forms import Form
from django.forms import widgets
from django.forms import fields
from django.core.exceptions import ValidationError
# 自定义验证规则
def mobile_validate(value):
mobile_re = re.compile(r'^(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$')
if not mobile_re.match(value):
raise ValidationError('手机号码格式错误')
class PublishForm(Form):
title = fields.CharField(max_length=20,
min_length=5,
error_messages={'required': '标题不能为空',
'min_length': '标题最少为5个字符',
'max_length': '标题最多为20个字符'},
widget=widgets.TextInput(attrs={'class': "form-control",
'placeholder': '标题5-20个字符'}))
# 使用自定义验证规则
phone = fields.CharField(validators=[mobile_validate, ],
error_messages={'required': '手机不能为空'},
widget=widgets.TextInput(attrs={'class': "form-control",
'placeholder': u'手机号码'}))
email = fields.EmailField(required=False,
error_messages={'required': u'邮箱不能为空','invalid': u'邮箱格式错误'},
widget=widgets.TextInput(attrs={'class': "form-control", 'placeholder': u'邮箱'}))
应用Bootstrap样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<title>login</title>
</head>
<body>
<div class="container">
<div class="row">
<form action="/login2/" method="post" novalidate class="form-horizontal">
{% csrf_token %}
<div class="form-group">
<label for="{{ form_obj.username.id_for_label }}"
class="col-md-2 control-label">{{ form_obj.username.label }}</label>
<div class="col-md-10">
{{ form_obj.username }}
<span class="help-block">{{ form_obj.username.errors.0 }}</span>
</div>
</div>
<div class="form-group">
<label for="{{ form_obj.pwd.id_for_label }}" class="col-md-2 control-label">{{ form_obj.pwd.label }}</label>
<div class="col-md-10">
{{ form_obj.pwd }}
<span class="help-block">{{ form_obj.pwd.errors.0 }}</span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">{{ form_obj.gender.label }}</label>
<div class="col-md-10">
<div class="radio">
{% for radio in form_obj.gender %}
<label for="{{ radio.id_for_label }}">
{{ radio.tag }}{{ radio.choice_label }}
</label>
{% endfor %}
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn btn-default">注册</button>
</div>
</div>
</form>
</div>
</div>
<script src="/static/jquery-3.2.1.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
批量添加样式
- 可通过重写form类的init方法来实现
class LoginForm(forms.Form):
username = forms.CharField(
min_length=8,
label="用户名",
initial="张三",
error_messages={
"required": "不能为空",
"invalid": "格式错误",
"min_length": "用户名最短8位"
}
...
def __init__(self, *args, **kwargs):
super(LoginForm, self).__init__(*args, **kwargs)
for field in iter(self.fields):
self.fields[field].widget.attrs.update({
'class': 'form-control'
})
ModelForm
- form与model的结合
class BookForm(forms.ModelForm):
class Meta:
model = models.Book
fields = "__all__"
labels = {
"title": "书名",
"price": "价格"
}
widgets = {
"password": forms.widgets.PasswordInput(attrs={"class": "c1"}),
}
-
class Meta:下常用参数：
model = models.Student # 对应的Model中的类
fields = "__all__" # 字段，如果是__all__,就是表示列出所有的字段
exclude = None # 排除的字段
labels = None # 提示信息
help_texts = None # 帮助提示信息
widgets = None # 自定义插件
error_messages = None # 自定义错误信息
ModelForm 使用实例
- 编写 ModelForm 类AlterBlogForm
from blog import models
from django import forms
class AlterBlogForm(forms.ModelForm):
class Meta:
model = models.Blog # 导入要生成表
fields = '__all__' # 指定要生成的字段
exclude = ['id',] # 需要排除的字段
error_messages = {
'name': {'required': '不能为空'}, # 指定字段约束的错误信息
'user': {'required': '不能为空'},
}
def __init__(self, *args, **kwargs): # 执行__init__继承父类__init__ 修改指定字段生成input标签的class属性 来修改标签的样式
super().__init__(*args, **kwargs)
from multiselectfield.forms.fields import MultiSelectFormField
for field_name, field in self.fields.items():
if not isinstance(field, MultiSelectFormField):
field.widget.attrs.update({'class': 'form-control'})
- views 视图
from blog import models
from blog.forms import AlterBlogForm
from django.shortcuts import render, redirect
def alter_blog(request, pk=None):
obj = models.Blog.objects.filter(id=pk).first() # 查询models对象 有对象 obj=models对象/没有对象 obj=None
title = '新增博客' if not pk else '编辑博客' # 通过pk给title复制
obj_all = AlterBlogForm(instance=obj) # 将obj传入AlterBlogForm判断是不是同一个models类(如果是) obj_all有值/obj_all=None
if request.method == 'POST': # 判断请求类型是否是 POST请求
obj_all = AlterBlogForm(data=request.POST, instance=obj) # 如果是POST 将页面提交的数据传输AlterBlogForm进行效验
if obj_all.is_valid(): # 判断是否通过效验
obj_all.save() # 通过以后保存
return redirect('blog:blog_list') # 重定向到blog_list
return render(request, 'alter_blog.html', {'obj_all': obj_all, 'title': title})
- html 代码
{% extends 'base.html' %}
{% block title %}
<h1>
{{ title }} <!--页面标题-->
</h1>
{% endblock %}
{% block content %}
<div class="panel-body">
<form class="form-horizontal" action="" method="post" novalidate>
{% csrf_token %} <!--生成input标签过 csrf效验-->
{% for field in obj_all %}
<div class="form-group {% if field.errors %} has-error {% endif %}"><!--判断字段是否有错误信息 如果有修改标签的class 让有错误信息的input框变成红色-->
<label for="{{ field.id_for_label }}" {% if not field.field.required %} style="color: dimgrey" {% endif %}
class="col-sm-2 control-label">{{ field.label }}</label>
<div class="col-sm-5">
{{ field }}
<span class="help-block">{{ field.errors.0}}</span><!--生成错误提示-->
</div>
</div>
{% endfor %}
<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>
{% endblock %}
