zoukankan      html  css  js  c++  java
  • 【1029 | Day55】Forms组件

    4. form组件

    4.1 form组件的功能

    1.搭建前端页面 >>> 渲染页面
    2.获取前端用户提交的数据校验 >>> 校验数据
    3.对数据的校验的结果 展示到前端页面给用户查看 >>> 展示错误信息

    4.2 form组件的使用

    自己要先写一个类

    from django import forms
    
    class MyRegForm(forms.Form):
    	username = forms.CharField(min_length=3,max_length=8)
    	password = forms.CharField(min_length=3,max_length=8)
        email = forms.EmailField()
    

    4.3 校验数据

    from app01 import views
    
    # 1.给自定义的类传一个字典
    obj = views.MyRegForm({'username':'jason','password':'12','email':'123'})
    
    # 2.判断数据是否全部合法
    obj.is_valid()  # 只有数据全部符合要求才会是True
    Out[4]: False
    
    # 3.查看符合校验规则的数据
    obj.cleaned_data
    Out[5]: {'username': 'jason'}
    
    # 4.查看不符合条件的数据以及不符合的原因是什么
    obj.errors
    Out[6]: 
    {
            'password': ['Ensure this value has at least 3 characters (it has 2).'],
            'email': ['Enter a valid email address.']
        }
                
    # 5.校验数据的时候 默认情况下类里面所有的字段都必须传值
    obj = views.MyRegForm({'username':'jason','password':'123'})
    obj.is_valid()
    Out[12]: False
    obj.errors
    Out[13]: {'email': ['This field is required.']}
    
    # 6.默认情况下可以多传 但是绝对不能少传
    obj = views.MyRegForm({'username':'jason','password':'1233','email':'123@qq.com','xxx':'ooo'})
    obj.is_valid()
    Out[15]: True
    

    4.4 渲染页面

    forms组件只会帮你渲染获取用户输入(输入,选择,下拉框...)的标签 ,提交按钮需要你自己手动写

    4.4.1 三种渲染前端页面的方式

    <p>三种渲染前端页面的方式</p>
    
    <p>第一种渲染前端页面的方式:封装程度太高了 标签样式及参数不方便调整 可扩展性差(不推荐使用)
    	{{ form_obj.as_p }}
    	{{ form_obj.as_ul }}
    </p>
    
    <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 foo in form_obj %}
    	<p>{{ foo.label }}{{ foo }}</p>
    {% endfor %}
    

    这一块还是比较简单的,动手试一试吧~

    表情

    4.5 展示错误信息

    4.5.1 取消前端的校验

    <form action="" method="post" novalidate>
    

    注意,此处form表单中添加一个参数即可!!!

    跟我念一遍,No--Valid--Date!!!

    表情

    4.5.2 展示错误信息

    对象.errors.0的方法,然后利用error_message=展示错误信息。

    <form action="" method="post" novalidate>
        {% for foo in form_obj %}
            <p>
                {{ foo.label }}:{{ foo }}
                <span style="color: red">{{ foo.errors.0 }}</span>
            </p>
        {% endfor %}
        <input type="submit">
    </form>
    
    class MyRegForm(forms.Form):
        username = forms.CharField(min_length=3, max_length=8, label='用户名',
                                   error_messages={
                                       'min_length': '用户名最短三位',
                                       'max_length': '用户名最长八位',
                                       'required': '用户名不能为空'
                                   }, initial='我是初始值', required=False
                                   )
        
        password = forms.CharField(min_length=3, max_length=8, label='密码', error_messages={
                                        'min_length': '密码最短三位',
                                        'max_length': '密码最长八位',
                                        'required': '密码不能为空'
                                    })
        
        email = forms.EmailField(label='邮箱', error_messages={
                                        'required': '邮箱不能为空',
                                        'invalid': '邮箱格式不正确'
                                    }, required=False)
    
    

    4.6 forms组件钩子函数

    4.6.1 局部钩子

    • 当你需要对某一个字段数据进行额外的一些列校验,可以考虑使用钩子函数
    • 针对单个字段的,使用局部钩子
    def clean_username(self):
        username = self.cleaned_data.get('username')
        if '陈伟霆' in username:
        # 给username字段下面提示错误信息
        	self.add_error('username','用户名不符合社会主义核心价值观')
        return username
    
    暴躁表情

    4.6.2 全局钩子

    • 针对多个字段的校验,使用全局钩子
    • 举个栗子:校验两次密码是否一致
    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
    

    4.7 改变input框的type属性值

    • widget= widgets.TextInput()
    • widget=widgets.PasswordInput()

    4.8 form-control属性

    一切都做的差不多的时候,我们就觉得这个表单样式也太丑了吧!!!作为颜控,这怎么能忍受得了!

    表情

    那么,如何让forms组件渲染出来的input框有form-control类属性?

    widget= widgets.TextInput(attrs={'class':'form-control others'})  # 如果有多个类属性 空格隔开
    widget= widgets.PasswordInput(attrs={'class':'form-control others'})
    

    每个字段 还支持正则校验

    • from django import forms
    • from django.forms import Form
    • from django.core.validators import RegexValidator
        class MyForm(Form):
            user = forms.CharField(
            validators=[RegexValidator(r'^[0-9]+$', '请输入数字'), RegexValidator(r'^159[0-9]+$', '数字必须以159开头')],
            )
    

    好了,今天的内容差不多就是这些,都是精华,看我博客的人都必须掌握!!!阿拉搜!!睡觉了

    表情
  • 相关阅读:
    软工1816 · 作业(十一)事后诸葛亮
    软工1816·Alpha冲刺(10/10)
    软工1816 · Alpha冲刺(9/10)
    软工1816 · Alpha冲刺(8/10)
    软工1816 · Alpha冲刺(7/10)
    软工1816 · Alpha冲刺(6/10)
    软工1816 · Alpha冲刺(5/10)
    软工1816 · 作业(九)团队现场编程实战
    团队项目评测
    Beta冲刺前准备
  • 原文地址:https://www.cnblogs.com/fxyadela/p/11761127.html
Copyright © 2011-2022 走看看