Django中的Form组件

简介: 一、form组件的主要功能:生成页面的HTML标签及样式对用户提交的数据进行校验自动生成错误信息保留上次输入信息二、使用form组件实现注册功能1、在Django项目下创建一个文件夹,在文件夹中创建一个朋友文件,名字随便起,之后在py文...

一、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生成的标签的样式区别如图:

img_87de19e5a64877482ca0aa7f30fa493b.png
微信图片_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)
    
相关文章
|
6月前
|
Python
Django——forms组件
Django——forms组件
|
4月前
|
JSON 前端开发 API
Django 后端架构开发:通用表单视图、组件对接、验证机制和组件开发
Django 后端架构开发:通用表单视图、组件对接、验证机制和组件开发
70 2
|
4月前
|
Python
Django表单组件
【8月更文挑战第20天】
37 1
|
4月前
|
前端开发 网络协议 数据库
Django入门到放弃之forms组件
Django入门到放弃之forms组件
|
7月前
|
JSON 数据库 数据格式
Django之Form组件
Django之Form组件
|
数据库 数据安全/隐私保护 Python
|
前端开发 中间件 数据安全/隐私保护
【Django】创建用户,中间件,表单组件
【Django】创建用户,中间件,表单组件
85 0
|
7月前
|
数据库 开发者 UED
如何使用Django的Form组件
如何使用Django的Form组件
73 0
|
存储 前端开发 JavaScript
Django第4步_理解form表单类与处理html的post、get
Django第4步_理解form表单类与处理html的post、get
84 0