Django中的Form组件
2018-08-23 本文已影响0人
SlashBoyMr_wang
一、form组件的主要功能：
- 生成页面的HTML标签及样式
- 对用户提交的数据进行校验
- 自动生成错误信息
- 保留上次输入信息
二、使用form组件实现注册功能
1、在Django项目下创建一个文件夹，在文件夹中创建一个朋友文件，名字随便起，之后在py文件中写一个RegisterForm类：
from django import forms
from django.core.validators import RegexValidator
from django.core.exceptions import ValidationError
class RegisterForm(forms.Form):#类必须继承forms.Form
# 用户名
username = forms.CharField(
min_length=6,#设置最小长度
max_length=12,#设置最大长度
label="用户名",#设置标签名
#错误信息提示设置
error_messages={
"min_length": "用户名不能少于6位",
"max_length":'用户名不能超过12位',
"required": "用户名不能为空"
},
#插件设置
widget=forms.widgets.TextInput(
attrs={"class": "form-control"}# 给生成的标签添加属性
)
)
# 电话号码
phone = forms.CharField(
label="手机号",
error_messages={
"required": "手机号不能为空"
},
# 调用Form组件中的验证器来校验手机号
validators=[RegexValidator(r'1[1-9][0-9]{9}','手机号格式不正确')],
widget=forms.widgets.TextInput(
attrs={'class': 'form-control'}, # 给生成的标签添加类属性
)
)
# 密码
password = forms.CharField(
label="密码",
min_length=6,
error_messages={
"required": "密码不能为空",
'min_length':'密码不能少于6位'
},
widget=forms.widgets.PasswordInput(
attrs={'class': 'form-control'}, # 给生成的标签添加属性
render_value=True # 返回报错信息的时候要不要展示密码
)
)
# 二次密码校验
re_password = forms.CharField(
label="确认密码",
min_length=6,
error_messages={
"required": "确认密码不能为空",
'min_length':'确认密码不能少于六位'
},
widget=forms.widgets.PasswordInput(
attrs={'class': 'form-control'}, # 给生成的标签添加属性
render_value=True # 返回报错信息的时候要不要展示密码
)
)
# 邮箱
email = forms.CharField(
label="邮箱",
error_messages={
"required": "邮箱不能为空",
},
# 调用Form组件中的验证器来校验邮箱
validators=[RegexValidator(r'^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$', "邮箱格式不正确")],
widget=forms.widgets.TextInput(
attrs={'class': 'form-control'}, # 给生成的标签添加属性
)
)
# 通过自定义一个clean_字段名的方法实现对Form表单特定字段的校验
def clean_username(self):
# 从cleaned_data中取出想要的数据
value = self.cleaned_data.get("username")
if "金瓶梅" in value:
# 错误就抛异常
raise ValidationError("不符合社会主义核心价值观！")
else:
return value
# 通过Form表单的全局钩子函数来验证两次输入的密码是否正确
# 该clean方法， 在每个字段都校验通过之后才调用执行
def clean(self):
password = self.cleaned_data.get('password')
re_password = self.cleaned_data.get('re_password')
if re_password and password == re_password:
# 判断正确就返回校验过后的数据
return self.cleaned_data
else:
# 添加错误到add_error
self.add_error('re_password','两次密码不一致，请重新输入')
# 主动抛出异常
raise ValidationError('两次密码不一致，请重新输入')
2、url的书写：
url(r'^register/', views.Register.as_view())#CBV方式写视图函数,
3、views中的视图函数：
from django.http import JsonResponse, HttpResponse
from django import views
from blog.myforms.forms import LoginForm, RegisterForm
class Register(views.View): # 必须继承views.View
# get请求方式
def get(self, request):
# 用自定义的Form类实例化一个对象，用于前端页面生成标签
register_obj = RegisterForm()
return render(request, 'register.html', {'register_obj': register_obj})
# post请求方式
def post(self, request):
# 前后端交互信息
res = {'code': 0}
# 实例化form类，将前端得到的数据提交到实例中
register_obj = RegisterForm(request.POST)
# 利用form内置方法校验前端得到的数据
if register_obj.is_valid():
# 从数据库中查询用户输入的用户名，手机号，邮箱是否重复
username = models.UserInfo.objects.filter(username=request.POST.get('username'))
phone = models.UserInfo.objects.filter(phone=request.POST.get('phone'))
email = models.UserInfo.objects.filter(email=request.POST.get('email'))
if username:
res['code'] = 1
res['msg'] = '用户名已存在，请重新输入'
elif phone:
res['code'] = 2
res['msg'] = '您输入的手机号已存在，请重新输入'
elif email:
res['code'] = 3
res['msg'] = '您输入的邮箱号已存在，请重新输入'
else:
# 数据正确后剔除re_password中的数据
register_obj.cleaned_data.pop("re_password")
# 得到前端的头像文件，文件和图片数据存放在request.FILES中
avatar_file = request.FILES.get('avatar_file')
# 通过数据库操作创建user
models.UserInfo.objects.create_user(**register_obj.cleaned_data, avatar=avatar_file)
# 返回前端页面要跳转的url
res['msg'] = '/login/'
else:
res['code'] = 4
# 错误信息
res['msg'] = register_obj.errors
return JsonResponse(res)
4、register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<link rel="stylesheet" href="/static/bootstrap/bootstrap-3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/mycss.css">
</head>
<body>
<div class="container" style="margin-top: 50px">
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<div class="panel panel-info" style="border: none">
<div class="panel-heading text-center">
<h4>用户注册</h4>
</div>
<div class="panel-bady">
<form>
{% csrf_token %}
{% for field in register_obj %}
<div class="form-group">
<label class="letleft" for="field.id_for_label">{{ field.label }}</label>
{{ field }}
<span class="err-msg"></span>
</div>
{% endfor %}
<div class="form-group">
<label for="avatar">用户头像<img id="avatar-img" src="/media/avatars/default.png" alt="用户头像"
style="height: 80px;width: 80px;margin-left: 15px"></label>
<input type="file" accept="image/*" id="avatar" style="display: none;">
<button type="button" id="register-btn" class="btn btn-success letleft">提交</button>
</div>
<div id="popup-captcha"></div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="/static/js/jquery-3.3.1.js"></script>
<script>
$(function () {
$("#register-btn").click(function () {
//ajax提交数据时，当有文件或者图片时，需要借助FormData对象来实现数据前后端交互，FormData
// 相当于是一个打包数据的工具，将需要传输的数据通过append方法以键值对的方式添加到FormData对象中
let formdata = new FormData();
formdata.append('username', $('#id_username').val());
formdata.append('phone', $('#id_phone').val());
formdata.append('password', $('#id_password').val());
formdata.append('re_password', $('#id_re_password').val());
formdata.append('email', $('#id_email').val());
//设置csrftoken来防止跨站csrf攻击
formdata.append('csrfmiddlewaretoken', $("[name='csrfmiddlewaretoken']").val());
//通过jquery对象获取文件需要将jquery对象转化成js对象再调用js对象的files方法
formdata.append('avatar_file', $("#avatar")[0].files[0]);
$.ajax({
url: '/register/',
type: 'post',
processData: false, //不让jQuery处理我的obj
contentType: false, // 不让jQuery设置请求的内容类型
data: formdata,
success: function (res) {
if (res.code === 0) {
location.href = res.msg
}
if (res.code === 1) {
$('#id_username').next().text(res.msg)
}
if (res.code === 2) {
$('#id_phone').next().text(res.msg)
}
if (res.code === 3) {
$('#id_email').next().text(res.msg)
}
if (res.code === 4) {
$.each(res.msg, function (k, v) {
//添加错误提示样式
$("#id_" + k).next().text(v[[0]]).parent().addClass('err-msg')
})
}
}
});
});
// 前端页面实现头像预览
// 当用户选中文件之后，也就是头像的input标签有值时触发
$("#avatar").change(function () {
// 找到用户选中的那个文件
let file = this.files[0];
// 生成一个读文件的对象
let fr = new FileReader();
// 从文件中读取头像文件数据
fr.readAsDataURL(file);
// 等到读完之后
fr.onload = function () {
// 将头像img标签的src属性更换成我选中的那个文件
$("#avatar-img").attr("src", fr.result)
}
});
//input标签聚焦清空样式
$('input').focus(function () {
$(this).next().text('').parent().removeClass('err-msg')
});
})
</script>
</body>
</html>
三、Form组件常用字段与插件介绍
创建Form类时，主要涉及到 【字段】 和 【插件】，字段用于对用户请求数据的验证，插件用于自动生成HTML;
1、initial
初始值，input框里面的初始值。
class LoginForm(forms.Form):
username = forms.CharField(
min_length=8,
label="用户名",
initial="王飞" # 设置默认值
)
pwd = forms.CharField(min_length=6, label="密码")
2、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="密码")
3、password
class LoginForm(forms.Form):
pwd = forms.CharField(
min_length=6,
label="密码",
widget=forms.widgets.PasswordInput(attrs={'class': 'c1'}, render_value=True)
)
4、radioSelect（生成的是input标签）
单radio值为字符串
class LoginForm(forms.Form):
gender = forms.fields.ChoiceField(
choices=((1, "男"), (2, "女"), (3, "保密")),
label="性别",
initial=3,//默认值
widget=forms.widgets.RadioSelect()
)
5、单选Select(生成select标签)
class LoginForm(forms.Form):
hobby = forms.fields.ChoiceField(
choices=((1, "篮球"), (2, "足球"), (3, "双色球"), ),
label="爱好",
initial=3,
widget=forms.widgets.Select()
)
6、多选Select（生成的是select标签）
class LoginForm(forms.Form):
hobby = forms.fields.MultipleChoiceField(
choices=((1, "篮球"), (2, "足球"), (3, "双色球"), ),
label="爱好",
initial=[1, 3],
widget=forms.widgets.SelectMultiple()
)
7、单选checkbox（生成的是input标签）
class LoginForm(forms.Form):
keep = forms.fields.ChoiceField(
label="是否记住密码",
initial="checked",
widget=forms.widgets.CheckboxInput()
)
8、多选checkbox(生成的是input标签)
class LoginForm(forms.Form):
hobby = forms.fields.MultipleChoiceField(
choices=((1, "篮球"), (2, "足球"), (3, "双色球"),),
label="爱好",
initial=[1, 3],
widget=forms.widgets.CheckboxSelectMultiple()
)
关于radioSelect、单选Select、多选Select、单选checkbox、多选checkbox生成的标签的样式区别如图：
微信图片_20180823205102.png
注意：关于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 MyForm(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类型
五、Form表单的用户数据验证方式：
方式一:内置的正则验证：
导入方式：from django.core.validators import RegexValidator
基本格式：validators=[RegexValidator(正则表达式, "错误提示"),]
email = forms.CharField(
label="邮箱",
error_messages={
"required": "邮箱不能为空",
},
# 调用Form组件中的验证器来校验邮箱
validators=[RegexValidator(r'^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$', "邮箱格式不正确")],
widget=forms.widgets.TextInput(
attrs={'class': 'form-control'}, # 给生成的标签添加属性
)
)
方式二、自定义验证
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):
# 使用自定义验证规则
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'邮箱'}))
首先补充几个变量含义，看了源码了解到的两个变量和一个方法：
- is_valid():校验用户
- cleaned_data --> 用来存放经过验证数据的大字典
- add_error("字段名", "错误提示信息")
方式三、局部钩子验证：
# 通过自定义一个clean_字段名的方法实现对Form表单特定字段的校验
def clean_username(self):
# 从cleaned_data中取出想要的数据
value = self.cleaned_data.get("username")
if "金瓶梅" in value:
# 错误就抛异常
raise ValidationError("不符合社会主义核心价值观！")
else:
return value
方式四、全局钩子验证：
# 通过Form表单的全局钩子函数来验证两次输入的密码是否正确
# 该clean方法， 在每个字段都校验通过之后才调用执行
def clean(self):
password = self.cleaned_data.get('password')
re_password = self.cleaned_data.get('re_password')
if re_password and password == re_password:
# 判断正确就返回校验过后的数据
return self.cleaned_data
else:
# 添加错误到add_error
self.add_error('re_password','两次密码不一致，请重新输入')
# 主动抛出异常
raise ValidationError('两次密码不一致，请重新输入')
六、Form的进阶骚操作
1、批量添加样式：
通过重写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'
})
2、Django 内置的把ORM对象转换成字典的工具函数：
from django.forms.models import model_to_dict
//book_obj为根据条件在数据库中查到的对象
//obj_dict是book_obj对象再数据库中对应的字段和值组成的键值对字典
obj_dict = model_to_dict(book_obj)
//form_obj通过initial设置初始化的值，例如，图书管理系统中的编辑书籍功能，
//点击编辑后跳转到编辑书籍页面，跳转后需要用要编辑的书籍信息填充页面对应信息。
form_obj = forms.BookForm(initial=obj_dict)
