forms组件(钩子函数(局部钩子、全局钩子)、三种页面的渲染方式、数据校验的使用)、form组件的参数以及单选多选形式

这篇具有很好参考价值的文章主要介绍了forms组件(钩子函数(局部钩子、全局钩子)、三种页面的渲染方式、数据校验的使用)、form组件的参数以及单选多选形式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、form是组件

后端代码

from django.shortcuts import render, redirect, HttpResponse


def ab_form(request):
    back_dict = {'username': '', 'password': ''}
    if request.method == 'POST':
        username = request.POST.get('username')
        password = request.POST.get('password')

        if '金瓶梅' in username:
            back_dict['username'] = '不符合规范'
        if len(password) < 3 and len(password) > 20:
            back_dict['password'] = '密码的长度只能介于3位到20位的区间'

    return render(request, 'ab_form.html', locals())


from django import forms


class MyForm(forms.Form):
    username = forms.CharField(min_length=3, max_length=8, label='用户名',
                               error_messages={
                                   'min_length': '用户名最少3位',
                                   'max_length': '用户名最大8位',
                                   'required': '用户名不能为空',
                               })
    password = forms.CharField(min_length=3, max_length=8, label='密码',
                               error_messages={
                                   'min_length': '密码最少3位',
                                   'max_length': '密码最大8位',
                                   'required': '密码不能为空',
                               })
    confirm_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': '密码不能为空',
                               })

    '''
        form_obj = views.MyForm({'username': 'json', 'password': 123, 'email': '123'})
        # 校验数据是否合法
        form_obj.is_valid()  False
        
        form_obj = views.MyForm({'username': 'json', 'password': 123, 'email': 'xx@123.com'})
        form_obj.is_valid()   True
       
        # 校验合法的数据有哪些
        form_obj.cleaned_data
        {'username': 'json', 'password': '123', 'email': 'xx@123.com'}
        
        form_obj = views.MyForm({'username': 'json', 'password': 123, 'email': '123'})
        form_obj.is_valid()  False
        
        form_obj.cleaned_data
        {'username': 'json', 'password': '123'}
        
        # 把不合法的数据找出来
        form_obj.errors  {'email': ['输入一个有效的 Email 地址。']}
        
        form_obj = views.MyForm({'username': 'json', 'password': 123})
        form_obj.is_valid()  False
        
        form_obj.errors
        {'email': ['这个字段是必填项。']}
        
    '''

    # 局部钩子
    def clean_username(self):
        # 获取到用户名
        username = self.cleaned_data.get('username')
        if '666' in username:
            # 提示前端展示错误信息
            self.add_error('username', '只含有666不行')
        # 将钩子函数钩取出来的数据再放回去
        return username

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

    '''
        钩子函数(HOOK):在特定的节点自动触发完成响应的操作
            在forms组件中有两类钩子
            1.局部钩子:
                当你需要给单个字段增加校验规则的时候可以使用
            2.全局钩子:
                当你需要给多个字段增加校验规则的时候可以使用

            案例:
                1.校验用户名中不能含有666 只是校验username字段,局部钩子
                2.校验密码和确认密码是否一致 password和confirm两个字段  全局钩子
        '''


def index(request):
    # 1.先产生一个空对象
    # 里面的label属性默认展示的是类中定义的字段首字母大写的形式,
    # 也可以自行修改,如:label='用户名'
    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')

        # 不合法,如何将错误信息展示到前端?

    # 2.直接将该空对象传递给html页面

    return render(request, 'index.html', locals())

2.前端值index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    {% load static %}
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'layer/layer.js' %}"></script>

</head>
<body>

<form action="" method="post" novalidate>
    <p>第一种页面渲染方式: 代码书写少,封装程度太高了,不便于后续的扩展,一般只在本地测试使用</p>
{#    {{ form_obj.as_p }}#}

    <p>第二种页面渲染方式:可扩展性很强,但是需要书写的代码太多,一般情况下不用</p>
{#    {{ form_obj.as_ul }}#}
{#    <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>
{#    {{ form_obj.as_table }}#}
    {% for form in form_obj %}
        <p>
            {{ form.label }}:{{ form}}
            <span style="color: red">{{ form.errors.0 }}</span>
        </p>
    {% endfor %}
    <input type="submit" class="btn btn-info">
    
</form>


</body>
</html>

3.前端之ab_form

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    {% load static %}
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'layer/layer.js' %}"></script>

</head>
<body>

<form action="" method="post">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <p>username :
                    <input type="text" name="username">
                    <span style="color: darkred">{{ back_dict.username }}</span>
                </p>
                <p>password:
                    <input type="password" name="password">
                    <span style="color: darkred">{{ back_dict.password }}</span>
                </p>
                <input type="submit" class="btn btn-info">
            </div>
        </div>
    </div>


</form>

</body>
</html>

4.form组件的参数以及单选多选形式

class MyForm(forms.Form):
    username = forms.CharField(min_length=3, max_length=8,
                               label='用户名',
                               initial='lin',
                               required=False,
                               error_messages={
                                   'min_length': '用户名最少3位',
                                   'max_length': '用户名最大8位',
                                   'required': '用户名不能为空',
                               },
                               widget=forms.widgets.TextInput(attrs={'class': 'form-control', 'username': 'lin'})
                               )
    password = forms.CharField(min_length=3, max_length=8, label='密码',
                               error_messages={
                                   'min_length': '密码最少3位',
                                   'max_length': '密码最大8位',
                                   'required': '密码不能为空',
                               },
                               widget=forms.widgets.PasswordInput()
                               )
    confirm_password = forms.CharField(min_length=3, max_length=8, label='确认密码',
                               error_messages={
                                   'min_length': '确认密码最少3位',
                                   'max_length': '确认密码最大8位',
                                   'required': '确认密码不能为空',
                               },
                               widget=forms.widgets.PasswordInput()
                               )
    # email字段必须符合邮箱格式:xxx@xx.com
    email = forms.EmailField(label='邮箱',
                             error_messages={
                                   'invalid': '邮箱格式不正确',
                                   'required': '密码不能为空',
                               },
                             widget=forms.widgets.EmailInput()
                             )
    # 还支持正则校验
    phone = forms.CharField(
        validators=[
            RegexValidator(r'^[0-9]+$', '请输入数字'),
            RegexValidator(r'^159[0-9]+$', '数字必须以159开头')
        ],
    )
    # 选择
    gender = forms.ChoiceField(
        choices=((1, '男'), (2, '女'), (3, '保密')),
        label='性别',
        initial=3,
        widget=forms.widgets.RadioSelect()
    )
    # 多选
    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()
    )

    '''
    forms组件其他参数及补充知识点:
        label 字段名
        error_messages  自定义报错信息
        invalid    邮箱格式提示信息
        initial    设置默认值
        required   控制字段是否必填
        
        
    字段没有样式:
        针对不同类型的input如何修改?
            通过 widget
            如:
            widget=forms.widgets.TextInput()
            widget=forms.widgets.TextInput(attrs={'class': 'form-control', 'username': 'lin'})
                注意:需要什么样式,自行添加, 若是多个属性值,直接空格隔开即可
            widget=forms.widgets.PasswordInput()
            widget=forms.widgets.EmailInput()
        text
        password
        date
        radio
        checkbox
        ...
        
    '''


    '''
        form_obj = views.MyForm({'username': 'json', 'password': 123, 'email': '123'})
        # 校验数据是否合法
        form_obj.is_valid()  False
        
        form_obj = views.MyForm({'username': 'json', 'password': 123, 'email': 'xx@123.com'})
        form_obj.is_valid()   True
       
        # 校验合法的数据有哪些
        form_obj.cleaned_data
        {'username': 'json', 'password': '123', 'email': 'xx@123.com'}
        
        form_obj = views.MyForm({'username': 'json', 'password': 123, 'email': '123'})
        form_obj.is_valid()  False
        
        form_obj.cleaned_data
        {'username': 'json', 'password': '123'}
        
        # 把不合法的数据找出来
        form_obj.errors  {'email': ['输入一个有效的 Email 地址。']}
        
        form_obj = views.MyForm({'username': 'json', 'password': 123})
        form_obj.is_valid()  False
        
        form_obj.errors
        {'email': ['这个字段是必填项。']}
        
    '''

    # 局部钩子
    def clean_username(self):
        # 获取到用户名
        username = self.cleaned_data.get('username')
        if '666' in username:
            # 提示前端展示错误信息
            self.add_error('username', '只含有666不行')
        # 将钩子函数钩取出来的数据再放回去
        return username

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

    '''
        钩子函数(HOOK):在特定的节点自动触发完成响应的操作
            在forms组件中有两类钩子
            1.局部钩子:
                当你需要给单个字段增加校验规则的时候可以使用
            2.全局钩子:
                当你需要给多个字段增加校验规则的时候可以使用

            案例:
                1.校验用户名中不能含有666 只是校验username字段,局部钩子
                2.校验密码和确认密码是否一致 password和confirm两个字段  全局钩子
        '''

文章来源地址https://www.toymoban.com/news/detail-677406.html

到了这里,关于forms组件(钩子函数(局部钩子、全局钩子)、三种页面的渲染方式、数据校验的使用)、form组件的参数以及单选多选形式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 两周掌握Vue3(三):全局组件、局部组件、Props

    代码仓库:跳转 本博客对应分支:03 Vue 3 中的全局组件是在应用程序中全局注册的组件,可以在任何地方使用,而不需要在每个组件中都单独注册。 在components目录下创建全局组件MyGlobalComponent.vue: 在App.vue中尝试使用我们定义和注册的全局组件: 效果: 在 Vue 3 中,局部组

    2024年01月18日
    浏览(47)
  • Django form组件 - 神奇的后端直接渲染HTML

    之前在HTML页面中利用form表单向后端提交数据时会写一些获取用户输入的标签并且使用form标签将其包裹起来。并且很多场景下都需要对用户的输入做校验,比如用户输入的长度和格式等,如果用户输入的有误就需要在页面上相应的位置显示相应的错误信息。而django form组件实

    2024年02月02日
    浏览(39)
  • Element组件完整引入、按需引入、样式修改(全局、局部)、简单安装less以及npm命令证书过期等

    npm i element-ui -S 在 main.js 中写入以下内容: 以上代码便完成了 Element 的引入。需要注意的是,样式文件需要单独引入。 借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。 首先,安装 babel-plugin-component: npm install babel-plugin-component -D 然后,将

    2024年01月23日
    浏览(54)
  • Vue定义全局组件的三种方式

    第一种方式 1.1使用 Vue.extend 来创建全局的Vue组件 1.2使用 Vue.component(‘组件的名称’, 创建出来的组件模板对象) Vue.component 第一个参数:组件的名称,引用组件的时候,就是一个HTML 标签形式来引入的 第二个参数: Vue.extend 创建的组件 ,其中 template 就是组件将来要展示的HTML内容 1

    2024年02月07日
    浏览(46)
  • Python学习笔记(四):函数的定义、函数的返回值、None类型、函数说明文档、函数的嵌套调用、局部变量、全局变量、global关键字

    目录 一、函数介绍 1. 函数是: 2. 使用函数的好处是: 二、函数的定义: 三、函数的参数 1.传入参数的功能是: 2.函数的传入参数 - 传参定义 3.注意事项: 4.练习:测量体温 四、函数的返回值 1.函数返回值的定义 2.None类型 五、函数说明文档 六、函数的嵌套调用 七、变量的

    2024年02月05日
    浏览(64)
  • uni-app:切换页面刷新,返回上一页刷新(onShow钩子函数的使用)

    切换页面刷新:通过onShow()便可实现 返回上一页通过uni.navigateBack({delta: 1});实现 以返回上一页刷新为例 在A页面写入方法refreshHandler() 在A页面写入onLoad(),onShow()  onLoad(): 首次进入页面时执行的方法,这里直接引入refreshHandler() 可以直接查询到页面数据 onShow(): 进入页面执行

    2024年02月15日
    浏览(58)
  • 【react】记录一次react组件props依赖异步数据(setFieldsValue)后传递form给子组件,再逐层传递给孙子组件引起的未渲染异常

    背景 react祖父组件设置异步数据(setFieldsValue)后传递form给子组件,再逐层传递给孙子组件引起的未渲染异常,孙子组件如果不设置useEffect和useState去监听value的值进行重渲染,会出现获取得到value最新值,但是不进行渲染的异常 解决前后的代码对比 完整代码(异常): 完整

    2024年01月17日
    浏览(44)
  • uniapp中全局页面挂载组件(小程序)

    uniapp中页面全局挂载组件 首先我说的方法不是全局引入注册使用的时候把标签放在页面中 所需库 vue-inset-loader 步骤: 1.首先需要把uniapp项目 初始化 2.下载所需库 3.创建vue.config.js 文件 从HBuilder X创建的uniapp项目没有vue.config.js文件 所以需要建一个 这里面的配置我也是研究了好

    2023年04月09日
    浏览(42)
  • uniapp中全局页面挂载组件(小程序,h5)

    1.uniapp 自带的 easycom 使用easycom的好处 1、简化组件的使用,提高开发效率 2、不论组件目录下安装了多少组件,easycom打包后会自动剔除没有使用的组件,对组件库的使用尤为友好。 说明 easycom方式引入的组件 无需在页面内import ,也 不需要在components内声明 ,即可在任意页面

    2024年02月05日
    浏览(43)
  • 整体认识和路由配置、基础数据渲染、热榜区域实现、图片预览组件封装、认识SKU组件、通用组件统一注册全局(详情页)【Vue3】

    整体业务认识 路由配置 准备组件模板 配置路由 绑定模板测试跳转 封装接口 获取数据渲染模版 思考:渲染模版时遇到对象的多层属性访问可能出现什么问题? 模块实现整体分析 结论:两块热榜相比, 结构一致,标题title和列表内容不同 渲染基础热榜数据 1- 准备模版 2- 封

    2024年02月15日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包