在Form表单中校验复杂对象（嵌套属性）

最新推荐文章于 2023-07-31 11:04:24 发布
最新推荐文章于 2023-07-31 11:04:24 发布
阅读量315 收藏
点赞数
文章标签： vue.js elementui
原文链接：https://github.com/umicro/uView/issues/643
版权
勇敢的小趴菜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ant-design中表单多级对象做嵌套表单校验
阿尔叭叭
04-24 434
在 useForm中拿到一个validateInfos，并传入formData和rules，在FormItem中绑定name名。
Vue - Element el-form 表单对象多层嵌套校验
最新发布
iotjin的专栏
08-03 3163
针对el-form的数据源是对象嵌套对象，在进行数据绑定和校验时和单层的对象有一点区别，
vue el-form 表单对象里还有对象，多层嵌套校验，制定校验规则
weixin_40841731的博客
07-19 9184
<template> <div> <el-form ref="dataFrom" :model="dataFrom" :rules="rules"> <el-form-item label="用户名" prop="userName"> <el-input v-model="dataFrom.userNa...
关于 form表单 嵌套问题的解决方案
10年职场两茫茫，35岁凄凉奈若何
12-12 435
关于 form表单 嵌套问题的解决方案
ant-design-vue 中 a-form-modal 中 form 数据为嵌套形式时验证该怎样写
weixin_46587302的博客
03-03 938
无
多层表单嵌套的验证
qq_32578989的博客
11-11 1264
vue中动态表单验证
在form表单中嵌套表格动态添加属性检验功能
sky___Show的博客
07-31 424
先贴一张场景图，就是在form表单中，我们嵌套了表格，但是表格的属性是动态添加的，我们需要在动态添加的时候，给每一个属性名都做出检验。我们理解需求之后，我们就开始实现我们的代码
vue + element-ui 对复杂对象型数组进行表单验证
qq_43551769的博客
03-09 1万+
标题 项目开发中vue + element-ui 对复杂对象型数组进行表单验证 需求场景 在最近的项目开发中，里面有个模块是关于采购系统的，采购避免不了做采购的台账信息表单，而采购的信息复杂且是动态添加的，所以也需要最复杂对象数组遍历循环添加验证。先添加一个图片1-1，这个验证的效果图。 这里对一些可能的小疑问做一下简要回答啊。疑惑1：比如为什么规格不做校验，因为规则和食材数组是绑定的，这在...
vue elementUI 表单校验功能之数组多层嵌套
12-08
然而，在处理复杂的数据结构，特别是涉及到数组和多层嵌套时，表单校验可能会变得相当棘手。本篇文章将详细介绍如何在Vue Element UI中进行数组多层嵌套的表单校验。 当数据结构包含数组，并且数组内的对象也需要...
vue elementUI 表单校验的实现代码（多层嵌套）
10-16
主要介绍了vue elementUI 表单校验的实现代码（多层嵌套），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
解决layui中的form表单与button的点击事件冲突问题
10-18
在开发Web应用时，我们经常会遇到各种前端框架的交互问题，其中之一就是在layui中处理form表单与button点击事件冲突的问题。layui是一个轻量级的前端组件库，它提供了丰富的UI元素和交互功能，包括表单组件和按钮。...
form表单嵌套，用标签的form属性来解决表单嵌套的问题
qq_20954959的博客
11-15 1万+
form标签嵌套，用标签的form属性解决表单嵌套的问题
Form表单父子组件校验，嵌套table校验
weixin_30378311的博客
08-23 1465
最近一直在做后台管理项目，自然少不了表单校验。说说我在表单校验上遇到的一些难点。 在父组件中校验子组件的信息； form表单嵌套表格的校验信息； 表单金额的校验规则（产品要求输入最多8位整数，4位小数，最高位不能位0）； 首先我们来看父组件如何去校验子组件中的信息 同一组件内的校验，都好办，难的是跨组件校验。 我们来看有这样一个场景：有一个编辑和查看的模块，默认展示查看模块，通过点击父组件的‘...
antdv form useForm list校验
yyd6976的博客
10-27 932
动态往rulesRef里添加属性进行校验
el-form表单对象内还嵌套对象，绑定的prop规则校验会失效
weixin_42190844的博客
11-25 5878
继续踩坑~。因为受限于后端返回的数据格式，整个表单是个对象，但是里面还会嵌套对象。 而我们在绑定字段时，自然而然是去绑定最里层的字段。 el-form的model是去绑定大的表单对象。 而我这里的表单项则是绑定final_transfer.acc_profit_name。但我这里prop写的是acc_profit_name。对应规则里面的prop。 按官方文档的，如果表单对象不涉及嵌套，这样绑定是没问题的。但如果涉及到了嵌套。我们这里这样绑定prop，即使表单的值改变了，校验也还是会存在。 解决.
Element-ui 中对表单（Form）绑定的对象中的对象属性进行校验
热门推荐
明天也要努力的博客
07-07 1万+
如果是直接绑定属性，是可以的，但是绑定对象中的属性就需要特别处理，需要在rules中添加双引号 " " <template> <div class="about"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" prop="name"&g
表单校验对象总结
Gong_Zheng6的博客
07-18 531
1.form对象： Form 对象代表一个 HTML 表单。 Form 对象集合： 集合 描述 elements[] 包含表单中所有元素的数组。 Form 对象常用属性： 属性 描述 action 设置或返回表单的 action 属性。 enctype 设置或返回表单用来编码内容的 MIME 类型。
element 表单校验数组嵌套，数组对象中对象必填校验
06-13
如果您在使用 Element UI 表单组件进行数组嵌套校验时需要实现必填校验，可以使用自定义的校验函数。具体实现步骤如下： 1. 在表单项中使用 `el-form-item` 包裹需要校验的表单项，并为其添加 `prop` 属性，例如： ```html <el-form-item label="嵌套数组" prop="nestedArray"> <!-- 嵌套数组表单项 --> </el-form-item> ``` 2. 在自定义的校验函数中，对嵌套的数组对象进行遍历，并对每个对象的属性进行必填校验，例如： ```js import { validateNestedArray } from '@/utils/validate' export default { data() { return { nestedArray: [ { name: '', age: '', gender: '' }, { name: '', age: '', gender: '' }, { name: '', age: '', gender: '' } ] } }, methods: { validate() { return this.$refs.form.validate() }, validateNestedArray(rule, value, callback) { if (!value) { callback(new Error('嵌套数组不能为空')) } else { for (let i = 0; i < value.length; i++) { const nestedObj = value[i] if (!nestedObj.name || !nestedObj.age || !nestedObj.gender) { callback(new Error(`第 ${i + 1} 个对象中的所有属性均为必填项`)) return } } callback() } } } } ``` 3. 在 `el-form` 中添加 `rules` 属性，并将自定义的校验函数作为校验规则，例如： ```html <el-form ref="form" :model="form" :rules="rules"> <!-- 表单项 --> </el-form> ``` ```js import { validateNestedArray } from '@/utils/validate' export default { data() { return { form: { nestedArray: [ { name: '', age: '', gender: '' }, { name: '', age: '', gender: '' }, { name: '', age: '', gender: '' } ] }, rules: { nestedArray: [ { validator: validateNestedArray, trigger: 'blur' } ] } } }, methods: { validate() { return this.$refs.form.validate() }, validateNestedArray(rule, value, callback) { // 校验函数实现 } } } ``` 通过以上步骤，就可以实现 Element UI 表单组件中的数组嵌套校验，具体的实现细节可以根据实际情况进行调整。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值