多层表单嵌套的验证

最新推荐文章于 2024-04-29 10:42:46 发布
最新推荐文章于 2024-04-29 10:42:46 发布
阅读量1.1k 收藏 2
点赞数
文章标签： vue.js anti-design-vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32578989/article/details/127811979
版权

 Error: please transfer a valid prop path to form item!

please transfer a valid prop path to form item的解决办法，a-form-model-item上的属性prop字段，必须是其父级组件a-form-model中绑定model字段中的一个直接子属性。

举个例子：

我这里拿嵌套多层的数据结构来看：

第一层嵌套的写法 

第二层嵌套的写法

嵌套2层错误写法

 原因是本文开头的第一句话：a-form-model-item上的属性prop字段，必须是其父级组件a-form-model中绑定model字段中的一个直接子属性

 比较清晰的例子：例子来源

蘑云阁
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
java实现多层嵌套循环参数转换
06-20
多层嵌套循环 参数转换 数据库配置报文父子级结构 java实现
多层Fragment嵌套（Fragment+ViewPager）滑动
03-24
Android主页面多层Fragment嵌套（Fragment+ViewPager）滑动，一个适合学习的好的demo，给学习Android开发的新手朋友传播数来
antd formItem 表单验证
misstianyun的博客
01-19 489
ant-design-vue formItem 组件的使用，应用场景需要在一行内验证多个字段且必填
vue elementUI 表单校验功能之数组多层嵌套
12-08
在使用vue element-ui form表单渲染的时候，会遇到这样的数据结构： { "title":''123455, "email":'[email protected]', "list": [ { "id": "quis consequat culpa ut pariatur", "name": "et quis irure dolore ullamco", "ompany": "sunt mollit", "address": "anim reprehenderit aliquip labore velit"
关于a-form-model-item的校验问题踩坑
qq_35478750的博客
09-19 1万+
关于a-form-model-item表单校验方式 对于vue，使用的比较多的方式为官方给出的 在整个表单外部 <a-form-model :rules="rules"> 在每个设置好prop的值，这样整个表单就能对相应的item项进行自动绑定校验 <a-form-model-item prop="ruleName"> 对于校验规则，vue2的用data（）中设置 data(){ const checkPerformanceSpec = (rule,
ant-design-vue 表单验证和 validator 自定义表单验证
热门推荐
qq_36437172的博客
02-09 2万+
在ant-design-vue中，提供FormModel表单组件，且支持v-model数据绑定，同时可以校验和提交功能的表单。 一、表单验证 <a-form-model ref="form" :rules="rules" :model="form" layout="inline" :label-col="{span: 10}" :wrapper-col="{span: 14}" > <a-form-model-item label="密...
Antd ＜a-form＞表单校验：v-model、v-decorator
chenyan0306i的博客
11-16 2591
a-form表单校验
vue 注册页面的实现
m0_58017645的博客
07-12 2589
一、登录组件表单的数据绑定 1.为a-form-model加上 :model="form"属性进行数据绑定 在a-form-model表单上填写的数据自动同步到form对象上 :model="form" 在当前组件的行为区有data数据，在data数据里面设置一个form对象，即为表单的数据绑定对象 2.为每一个表单项的文本输入框通过v-model属性绑定form对象上具体的属性中 为了看到测试效果，我在这里先在form对象初始化一个值，用户在页面上可以看到以用户名和密码等 ...
Ant Design of Vue中a-form-model多行表单对齐和验证
前端-尔嵘
03-16 1万+
Ant Design of Vue中a-form-model多行表单对齐和验证
antdv 表单验证的几种方法
ww08010056veo的博客
10-20 1873
拒绝废话 template <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol" > <a-form-model-item ref="name" label="Activity name" prop="name"> <a-input v-model="f
Ant-Design-Vue中，a-form-model嵌套table，并且支持动态添加输入框还支持表单校验
JerryAnDBun的博客
03-22 5048
在这里，form的属性则是word和type这两个数组，又因为我有许多输入框，我用的是数组来对应那些输入框。所以prop应该是动态的，（每个输入框的prop不一样嘛），则写出了:prop="`word[${index}]`"。我设计的form叫addForm，里面的word和type是个数组，专门存对应的数据。每需要添加一行就往table的datasource里添加一个空数据站位字，使得表格多出一行，而重点是如何准确的获取每一行的数据并且监听和校验呢？最终效果如下图，没填的会报空，填了的则正常。
a-form-model-item设置校验永远慢一步或者无效
weixin_45440916的博客
10-26 1940
a-form-model-item设置校验，不管如何都只出“请输入名称”的提示信息，明明控制台callback的信息是“名称重复”出现的效果或者应该出现的提示信息总是慢一步
vue elementUI 表单校验的实现代码（多层嵌套）
10-16
主要介绍了vue elementUI 表单校验的实现代码（多层嵌套），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
三、VUE数据代理
最新发布
D_A_I_H_A_O的博客
04-29 309
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
党务学习|基于SprinBoot+vue的大学生党务学习平台(源码+数据库+文档)
伟庭的博客
04-27 666
大学生党务学习平台管理系统按照操作主体分为管理员和用户。用户的功能等。该系统采用了Mysql数据库，Java语言，Spring Boot框架等技术进行编程实现。大学生党务学习平台管理系统可以提高大学生党务学习平台信息管理问题的解决效率，优化大学生党务学习平台信息处理流程，保证大学生党务学习平台信息数据的安全，它是一个非常可靠，非常安全的应用程序。大学生党务学习平台管理系统；入党申请,党课Mysql数据库；Java语言。
vue 快速入门 系列 —— 玩转 CMS
ZL4120505的博客
04-29 582
例如 src/layouts/BasicLayout.less，里面包含一些基本布局的样式，被 src/layouts/BasicLayout.vue 引用，项目中使用这种布局的页面就不需要再关心整体布局的设置。好比中医发展了好几千年，许多本源的东西老中医也是不清楚的，但我们摸索出一套规则，按照这个能治病，这个就很好。.clearfix() 混合器定义了清除浮动的样式。组件相关的样式，有一些在页面中重复使用的片段或相对独立的功能，你可以提炼成组件，相关的样式也应该提炼出来放在组件中，而不是混淆在页面里。
vue报错：Do not mutate vuex store state outside mutation handlers.
weixin_44021888的博客
04-25 310
vue报错：Do not mutate vuex store state outside mutation handlers.
el-tree 或 el-tree-select 根据条件，控制节点的显示隐藏
IT_dabai的博客
04-25 288
要求el-tree-select 的节点根据节点数据状态来进行显示隐藏（状态字段为status，显示：‘1’，隐藏：‘0’）
el-popover放在el-table中点击无反应问题
Z_Gleng的博客
04-24 263
我们想在table中给btn加弹框但是 el-popover点击按钮没有任何反应。:通过插槽去添加这个组件el-popover的id是否绑定了一个值。给每个el-popover都加上单独的id。代码 给每个组件都绑定ref。通过他的id去控制关闭。
ts 多层数组嵌套并表单验证
09-08
TS 多层级数组嵌套并且表单验证是一个常见的需求，在 TypeScript 中可以通过使用类型注解和条件语句来实现。 在多层级数组嵌套的情况下，我们可以定义一个嵌套的接口类型来表示数据结构。例如，假设我们有一个表单，其中包含多个用户的信息，而每个用户又包含多个地址。可以定义一个嵌套的接口类型来表示这个数据结构： ```ts interface User { name: string; addresses: Address[]; } interface Address { street: string; city: string; country: string; } ``` 接下来，在表单验证方面，我们可以通过定义一个验证函数来验证表单的输入。例如，我们可以编写一个验证函数，该函数接收一个用户对象作为参数，并检查用户的名称和地址是否符合特定的规则： ```ts function validateUser(user: User): boolean { if (user.name.trim() === "") { console.error("用户名不能为空"); return false; } for (let address of user.addresses) { if (address.street.trim() === "" || address.city.trim() === "" || address.country.trim() === "") { console.error("地址信息不能为空"); return false; } } // 验证通过 return true; } ``` 这样，我们就可以使用这个验证函数来验证用户输入的数据了。例如，假设我们有一个用户表单如下： ```ts const userForm: User = { name: "John", addresses: [ { street: "123 Main St", city: "City", country: "Country" }, { street: "456 Second St", city: "", country: "Country" } ] }; // 验证用户表单 validateUser(userForm); ``` 以上就是使用 TypeScript 实现多层级数组嵌套并进行表单验证的一个示例。通过定义嵌套的接口类型和验证函数，可以更好地控制表单输入的规范性和准确性，从而提高代码的可靠性和可维护性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值