一、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)