一、Django内置Form组件:
在使用Django内置的Form组件时,里面包含了许多【字段】和【插件】,也就是验证用户输入的请求以及生成显示在前端的HTML。下面介绍一下用法:

Field required=True, 是否允许为空 widget=None, HTML插件 label=None, 用于生成Label标签或显示内容 initial=None, 初始值 help_text='', 帮助信息(在标签旁边显示) error_messages=None, 错误信息 {'required': '不能为空', 'invalid': '格式错误'} show_hidden_initial=False, 是否在当前插件后面再加一个隐藏的且具有默认值的插件(可用于检验两次输入是否一直) 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类型 ...
Django内置的字段和插件就是那么多,接下来让我们列举一下常用的字段:
ChoiceField ***** //下拉框 MultipleChoiceField //多选 CharField IntegerField DecimalField DateField DateTimeField EmailField GenericIPAddressField FileField RegexField
练习:

from django.shortcuts import render,redirect from django.shortcuts import HttpResponse from django import forms from django.forms import fields from django.forms import widgets #自定制插件 # Create your views here. class f1Form(forms.Form): user = forms.CharField(required=True,min_length=2,max_length=8,error_messages={ 'required':'用户名不能为空', 'max_length':'长度太长了', 'min_length':'长度太短了' }) city = fields.CharField( initial=2, widget=widgets.Select(choices=((1,'上海'),(2,'北京'),)) #自定制为下拉框 ) pwd = fields.CharField( widget=widgets.PasswordInput(attrs={'class':'c1','name':'pwd'}) #自定制密码输入框和属性 ) def f1(request): if request.method == "GET": obj = f1Form() return render(request,'f1.html',{'obj':obj}) else: obj = f1Form(request.POST) #用户提交数据 if obj.is_valid(): print('验证成功',obj.cleaned_data) #提交的数据,字典形式 return redirect('http://baidu.com') else: print('验证失败',obj.errors) return render(request,'f1.html',{'obj':obj}) 验证用户请求(创建类)

<form action="/" method="POST" enctype="multipart/form-data"> <p>{{ form.user }} {{ form.user.errors }}</p> <p>{{ form.city }} {{ form.city.errors }}</p> <p>{{ form.filt}} {{ form.filt.errors }}</p> <input type="submit"/> </form>
二、扩展Form组件验证功能:
Form内置的验证功能只能判断一下大概的格式是否正确,但是我们的需求远远不只这些,例如需要判断用户输入的用户名是否已经存在了(需要在数据库比对)、邮箱规定的格式等等。
两种功能扩展:
①自定制正则表达式
②验证用户名是否存在(基于源码增加)

import json from django.core.validators import RegexValidator from django.core.exceptions import NON_FIELD_ERRORS,ValidationError #扩展验证规则 class AjaxForm(forms.Form): username = fields.CharField( min_length=3, # error_messages={'invalid':'格式错误'}, ) user_id = fields.IntegerField( widget=widgets.Select(choices=[(1,'ray',),(2,'alex',),(3,'xiaom',)]) ) phone = fields.CharField( # 自定制正则表达式 validators=[RegexValidator(r'^[0-9]+$', '请输入数字'), RegexValidator(r'^159[0-9]+$', '159开头的数字')] ) #自定义方法 clean_字段名 #必须返回值self.cleaned_data['username'] #如果出错,raise ValidationError('用户名已存在') def clean_username(self): v = self.cleaned_data['username'] if UserInfo.objects.filter(username=v).count(): raise ValidationError('用户已经存在') return v def clean_user_id(self): return self.cleaned_data['user_id'] def ajax_form(request): ret = {'code':100,'msg':None} if request.method=='GET': obj = AjaxForm() return render(request,'ajax_form.html',locals()) else: obj = AjaxForm(request.POST) if obj.is_valid(): # print(obj.cleaned_data) return HttpResponse(json.dumps(ret)) else: # print(type(obj.errors)) # <class 'django.forms.utils.ErrorDict'> **** from django.forms.utils import ErrorDict ret['code']=101 ret['msg']=obj.errors return HttpResponse(json.dumps(ret))

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax的Form</title> </head> <body> <form id="f1" action="/ajax_form/" method="post"> <p>{{ obj.username.label }}{{ obj.username }}<span id="errormsg"></span></p> <p>{{ obj.user_id.label }}{{ obj.user_id }}</p> <p>{{ obj.phone.label }}{{ obj.phone }}</p> <input id="btn" type="button" value="提交"> </form> <script src="/static/jq/jquery-3.3.1.min.js"></script> <script> $(function () { $('#btn').click(function () { $.ajax({ url:'/ajax_form/', type:'POST', data:$('#f1').serialize(), dataType:'JSON', success:function (arg) { //arg状态,错误信息 if(arg.code == 100){ window.location.href='http://www.baidu.com'; }else { console.log(arg['msg']); {#$('#errormsg').text(arg['msg'])#} } } }) }) }) </script> </body> </html>
结果图: