Django之Form字段插件

一、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)    格式：--
TimeField(BaseTemporalField)    格式：:
DateTimeField(BaseTemporalField)格式：-- :

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 = ((,'上海'),(,'北京'),)
    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=), 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..1时候，可解析为192.0.2.， 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=,max_length=,error_messages={
        'required':'用户名不能为空',
        'max_length':'长度太长了',
        'min_length':'长度太短了'
    })
    city = fields.CharField(
        initial=,
        widget=widgets.Select(choices=((,'上海'),(,'北京'),))      #自定制为下拉框
    )
    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字段创建类

<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>

HTML

二、扩展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=,
        # error_messages={'invalid':'格式错误'},
    )
    user_id = fields.IntegerField(
        widget=widgets.Select(choices=[(,'ray',),(,'alex',),(,'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':,'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']=
            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 == ){
                            window.location.href='http://www.baidu.com';
                        }else {
                            console.log(arg['msg']);
                            {#$('#errormsg').text(arg['msg'])#}
                        }
                    }
                })
            })
        })
    </script>
</body>
</html>

HTML Code

结果图：