react自主设计表单验证类比antDesign

antDesign表单函数配置分析

在这里插入图片描述


getFieldDecorator包起来的高阶组件 进行扩展

getFieldDecorator(name,options)(component)

对组件进行name注册,传入opotions配置
以及回调里传入底层组件component

自定义表单验证

思路:
用装饰器来扩展底部组件
在装饰器里写入对事件的处理
(装饰器教程链接:https://blog.csdn.net/qq_40593656/article/details/103975468

  1. 创建底层组件

    在这里插入图片描述

  2. 在kFormCreate里扩展现有的表单,事件处理,数据收集,校验
    (1)创建input 包装器

    在这里插入图片描述

    在这里插入图片描述


    将表单的配置存到options里
    表单的值存到state里(方便进行值的更新)
    要扩展传入的组件,只能进行clone然后添加属性,不能改变原有的vDom

    (2)修改底部组件构造

    在这里插入图片描述


    (3)校验单个表单

    在这里插入图片描述


    暂时只拿必填测试 用some 检测到一个满足条件就会返回true,后面的不检测

    (4)对输入的值进行实时更新及事实检测

    在这里插入图片描述


    (5)在点击提交时检测所有表单

    在这里插入图片描述


    every() 检测到一个满足条件就会返回false,后面的不检测

    (6)装饰器组件和基底组件完成通信
    因为表单的包装函数和总体校验函数 要传递给基底组件使用
    所以在装饰器组件的返回上 要用父子组件传递的形式 传递和调用

    在这里插入图片描述


    后期如果有需要会上传代码地址

Cici_Ivory 发布了22 篇原创文章 · 获赞 0 · 访问量 2625 私信 关注

原文地址:https://blog.csdn.net/qq_40593656/article/details/104015956

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


过滤器:就是筛选filters: [ { text: '全部', value: '' }, { text: '通过', value: '通过' }, { text: '拒绝', value: '拒绝' }, { text: '待处理', value: '待处理' }, ], onFilter: (value, record) => record.c...
好处: 就是可以实现 响应式 拉伸行(row) 列(col)col要直接在row下基本理解:span="多少" //最大24格子 一行是24格子 一个 row 里面的col 的span加起来24就占满了<a-row> <a-col :span="12">col-12</a-col> <a-col :span="12">col-12</a-col> <a-col :sp...
创好vue 项目npm 下载antnpm i --save ant-design-vue@next完整引入main文件下添加import Antd from 'ant-design-vue';import 'ant-design-vue/dist/antd.css';.use(Antd)这样就ok了使用的时候就是正常复制代码使用按需引用...
外面套个from 标签就好了。
antDesign表单函数配置分析用getFieldDecorator包起来的高阶组件进行扩展getFieldDecorator(name,options)(component)对组件进行name注册,传入opotions配置以及回调里传入底层组件component自定义表单验证思路:用装饰器来扩展底部组件在装饰器里写入对事件的处理
之前在vue页面中引入axios使用,本篇在mainjs中引入1、mainjs中引入axios,设置基础urlimportaxiosfrom'axios'axios.defaults.baseURL='https://localhost:8080/'Vue.prototype.axios=axios2、在vue页面中,注意axios前需要加this.methods:{login(){letthat
先直接上核心代码:this.goToHomePage换成自己逻辑自己写的时候直接把this.goToHmoPage()换成自己的逻辑就行了,还有注意一点的是: 需要传个空函数,不然会报错在componentWillMount移除事件监听是防止浪费内存影响性能。最后在antdesign实现enter回车的方式如下: htmlT
Jeecg-Boot是一款基于SpringBoot+代码生成器的快速开发平台!采用前后端分离架构:SpringBoot,Ant-Design-Vue,Mybatis,Shiro,JWT。强大的代码生成器让前端和后台代码一键生成,不需要写任何代码,保持jeecg一贯的强大,绝对是全栈开发福音!!JeecgBoot在提高UI能力的同时,降低了前后分离的开发
<template> <div> <a-pagination show-quick-jumper v-model:current="current1"
表单验证详解 <template> <!-- 第一个坑 :model="formState.youForm" 一定要写成这样 不要写成:model="f
<template> <a-table :columns="columns" :data-source="data" :row-selecti
下载 ui库 yarn add ant-design-vue 默认是全局引入,打包后体积很大, 非常影响首屏加载速度, 按需加载 下载按需加载的插件;推荐使用cnpm cnpm install bab
表单验证遇见的坑 01 如果你受控数据是这样写的话 const formState= reactive({ youForm:{ youNaNe:'', useSlectValue: &
Ant Design Vue中Table对齐方式显示省略号 <template> <!-- bordered 表示表格中的边框 pagination="false&quot
<a-drawer :title="myTitle" placement="right" :visible="visible" @cl
InputNumber 有值但是验证却不能够通过 今天遇见这样一个问题,InputNumber 输入框中有值 但是却却提示验证不能够通过 后来经过分析,怀疑是数据类型不正确, 后面经过验证,果然是数据
Select 选择器进行搜索 <template> <div> <a-form-item label="分类:"> <a-select p
<template> <a-tree-select v-model:value="value" "width: 320px" :t
1.创建子组件 <template> <a-drawer :title="drawerInfo.customTitle" :placement="pla
<template> <div class="clearfix"> {{ fileList }} <a-upload list-type="