Forms组件

发布时间 2023-06-28 18:39:37作者: 乱了啦

forms组件有什么用

  • 1.手动书写前端获取用户数据的html代码           渲染html代码
  • 2.后端对用户数据进行校验                           校验数据
  • 3.对不符合要求的数据进行前端提示                  展示提示信息
  • forms组件
  • 能够完成的事情
  • 1.渲染html代码
  • 2.校验数据
  • 3.展示提示信息
  • 为什么数据校验非要去后端 不能在前端利用js直接完成呢?
  • 数据校验前端可有可无
  • 但是后端必须要有!!!
  • 因为前端的校验是弱不禁风的 你可以直接修改
  • 或者利用爬虫程序绕过前端页面直接朝后端提交数据
  • 购物网站
  • 选取了货物之后 会计算一个价格发送给后端 如果后端不做价格的校验
  • 实际是获取到用户选择的所有商品的主键值
  • 然后在后端查询出所有商品的价格 再次计算一遍
  • 如果跟前端一致 那么完成支付如果不一致直接拒绝

 

基本使用

 

from django import forms


class MyForm(forms.Form):
    # username字符串类型最小3位最大8位
    username = forms.CharField(min_length=3,max_length=8)
    # password字符串类型最小3位最大8位
    password = forms.CharField(min_length=3,max_length=8)
    # email字段必须符合邮箱格式  xxx@xx.com
    email = forms.EmailField()

 

校验数据

 

  • 1.测试环境的准备 可以自己拷贝代码准备
  • 2.其实在pycharm里面已经帮你准备一个测试环境    python console

 

from app01 import views
# 1 将带校验的数据组织成字典的形式传入即可
form_obj = views.MyForm({'username':'jason','password':'123','email':'123'})
# 2 判断数据是否合法		注意该方法只有在所有的数据全部合法的情况下才会返回True
form_obj.is_valid()
False
# 3 查看所有校验通过的数据
form_obj.cleaned_data
{'username': 'jason', 'password': '123'}
# 4 查看所有不符合校验规则以及不符合的原因
form_obj.errors
{
  'email': ['Enter a valid email address.']
}
# 5 校验数据只校验类中出现的字段 多传不影响 多传的字段直接忽略
form_obj = views.MyForm({'username':'jason','password':'123','email':'123@qq.com','hobby':'study'})
form_obj.is_valid()
True
# 6 校验数据 默认情况下 类里面所有的字段都必须传值
form_obj = views.MyForm({'username':'jason','password':'123'})
form_obj.is_valid()
False
"""
也就意味着校验数据的时候 默认情况下数据可以多传但是绝不可能少传
"""

 

  

 

渲染标签

 

"""
forms组件只会自动帮你渲染获取用户输入的标签(input select radio checkbox)
不能帮你渲染提交按钮
"""
def index(request):
    # 1 先产生一个空对象
    form_obj = MyForm()
    # 2 直接将该空对象传递给html页面
    return render(request,'index.html',locals())

# 前端利用空对象做操作
    <p>第一种渲染方式:代码书写极少,封装程度太高 不便于后续的扩展 一般情况下只在本地测试使用</p>
    {{ form_obj.as_p }}
    {{ form_obj.as_ul }}
    {{ form_obj.as_table }}
    <p>第二种渲染方式:可扩展性很强 但是需要书写的代码太多  一般情况下不用</p>
    <p>{{ form_obj.username.label }}:{{ form_obj.username }}</p>
    <p>{{ form_obj.password.label }}:{{ form_obj.password }}</p>
    <p>{{ form_obj.email.label }}:{{ form_obj.email }}</p>
    <p>第三种渲染方式(推荐使用):代码书写简单 并且扩展性也高</p>
    {% for form in form_obj %}
        <p>{{ form.label }}:{{ form }}</p>
    {% endfor %}
 
"""
label属性默认展示的是类中定义的字段首字母大写的形式
也可以自己修改 直接给字段对象加label属性即可
	 username = forms.CharField(min_length=3,max_length=8,label='用户名')
"""

 

  

 

展示提示信息

 

  浏览器会自动帮你校验数据 但是前端的校验弱不禁风
  如何让浏览器不做校验
  <form action="" method="post" novalidate>
 
后端
class MyForm(forms.Form):
    # username字符串类型最小3位最大8位
    username = forms.CharField(min_length=3,max_length=8,label='用户名',
                               error_messages={
                                   'min_length':'用户名最少3位',
                                   'max_length':'用户名最大8位',
                                   'required':"用户名不能为空"
                               }
                               )
    # password字符串类型最小3位最大8位
    password = forms.CharField(min_length=3,max_length=8,label='密码',
                               error_messages={
                                   'min_length': '密码最少3位',
                                   'max_length': '密码最大8位',
                                   'required': "密码不能为空"
                               }
                               )
    # email字段必须符合邮箱格式  xxx@xx.com
    email = forms.EmailField(label='邮箱',
                             error_messages={
                                 'invalid':'邮箱格式不正确',
                                 'required': "邮箱不能为空"
                             }
                             )

  数据处理


def index(request): # 1 先产生一个空对象 form_obj = MyForm() if request.method == 'POST': # 获取用户数据并且校验 """ 1.数据获取繁琐 2.校验数据需要构造成字典的格式传入才行 ps:但是request.POST可以看成就是一个字典 """ # 3.校验数据 form_obj = MyForm(request.POST) # 4.判断数据是否合法 if form_obj.is_valid(): # 5.如果合法 操作数据库存储数据 return HttpResponse('OK') # 5.不合法 有错误 # 2 直接将该空对象传递给html页面 return render(request,'index.html',locals())

前端

 

{% for form in form_obj %}
        <p>
            {{ form.label }}:{{ form }}
            <span style="color: red">{{ form.errors.0 }}</span>
        </p>
{% endfor %}
1.必备的条件 get请求和post传给html页面对象变量名必须一样
2.forms组件当你的数据不合法的情况下 会保存你上次的数据 让你基于之前的结果进行修改
更加的人性化

 

钩子函数(HOOK)
  • 在特定的节点自动触发完成响应操作
  • 钩子函数在forms组件中就类似于第二道关卡,能够让我们自定义校验规则
  • 在forms组件中有两类钩子
  • 1.局部钩子
  • 当你需要给单个字段增加校验规则的时候可以使用
  • 2.全局钩子
  • 当你需要给多个字段增加校验规则的时候可以使用

 

    # 钩子函数  在类里面书写方法即可
    # 局部钩子
    def clean_username(self):
        username = self.cleaned_data.get('username')
        if '666' in username:
            # 提示前端展示错误信息
            self.add_error('username', '光喊666是没用的')
        # 将钩子函数钩去出来数据再放回去
        return username

    # 全局钩子
    def clean(self):
        password = self.cleaned_data.get('password')
        confirm_password = self.cleaned_data.get('confirm_password')
        if not password == confirm_password:
            self.add_error('confirm_password', '两次密码不一致')
        # 将钩子函数钩出来数据再放回去
        return self.cleaned_data


def forms(request):
    # 1 先产生一个空对象
    form_obj = MyForm()
    if request.method == 'POST':
        # 获取用户数据并且校验
        form_obj = MyForm(request.POST)
        if form_obj.is_valid():
            # 5.如果合法 操作数据库存储数据
            return HttpResponse('ok')
        # 5.不合法 有错误
    # 2 直接将该空对象传递给html页面
    return render(request, 'login.html', locals())

 

  

前端

 

<form action="" method="post" novalidate>
    {% for form in form_obj %}
    <p>{{ form.label }}:{{ form }}</p>
    <span style="color: red">{{ form.errors.0 }}</span>
{% endfor %}
<input type="submit" class="btn btn-primary">
</form>

 

forms组件其他参数及补充知识点
label		字段名
error_messages  自定义报错信息
initial  默认值
required  控制字段是否必填
"""
1.字段没有样式
2.针对不同类型的input如何修改
	text
	password
	date
	radio
	checkbox
	...
"""
widget=forms.widgets.PasswordInput(attrs={'class':'form-control c1 c2'})
# 多个属性值的话 直接空格隔开即可

# 第一道关卡里面还支持正则校验
validators=[
            RegexValidator(r'^[0-9]+$', '请输入数字'),
            RegexValidator(r'^159[0-9]+$', '数字必须以159开头')
        ]
其他类型渲染
# radio
    gender = forms.ChoiceField(
        choices=((1, "男"), (2, "女"), (3, "保密")),
        label="性别",
        initial=3,
        widget=forms.widgets.RadioSelect()
    )
    # select
    hobby = forms.ChoiceField(
        choices=((1, "篮球"), (2, "足球"), (3, "双色球"),),
        label="爱好",
        initial=3,
        widget=forms.widgets.Select()
    )
    # 多选
    hobby1 = forms.MultipleChoiceField(
        choices=((1, "篮球"), (2, "足球"), (3, "双色球"),),
        label="爱好",
        initial=[1, 3],
        widget=forms.widgets.SelectMultiple()
    )
    # 单选checkbox
    keep = forms.ChoiceField(
        label="是否记住密码",
        initial="checked",
        widget=forms.widgets.CheckboxInput()
    )
    # 多选checkbox
    hobby2 = forms.MultipleChoiceField(
        choices=((1, "篮球"), (2, "足球"), (3, "双色球"),),
        label="爱好",
        initial=[1, 3],
        widget=forms.widgets.CheckboxSelectMultiple()
    )