elementui 嵌套表单验证_vue elementUI 表单校验（多层嵌套）//终极版

最新推荐文章于 2024-05-22 18:10:50 发布
最新推荐文章于 2024-05-22 18:10:50 发布
阅读量2.1k 收藏 11
点赞数 3
文章标签： elementui 嵌套表单验证
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_32559133/article/details/113383805
版权

相信搜索这个问题的兄弟萌都会看到这个链接

vue elementui表单校验

但是这篇文章的校验规则编写实际上是实际上存在一些问题的，然后在我自己的验证下试图总结一哈element表单的校验到底应该怎么写

基础规则

表单内部项绑定校验主要靠prop和rules，porp指明地址，rules声明规则

表单顶层需要绑定一个model，此后表单内部的prop路径均基于这个model往下写。

表单顶层可以选择绑定一个rules，绑定了的话表单内部项可以根据prop自动查找

普通对象

f29a4f913b6b8850ab08332a29711129.png

f685e23339297b82878cc8f3b872659b.png

这是一个普通的位于多层对象嵌套下的表单，这时表单顶层的model是data2.obj,对应的表单顶层规则是rules，rules里面写了foo的校验规则，那么prop只需要写上foo就彳亍了

嵌套对象

de53d65e007ed7a9df70f3b2fdaa0d3a.png

最低0.47元/天 解锁文章
数字游民Jarod
关注
  • 3
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue elementUI 表单校验功能之数组多层嵌套
12-08
总结一下，处理Vue Element UI表单的数组多层嵌套校验，关键在于理解如何正确地绑定和校验数组内的对象属性。无论是通过内嵌的`el-form`组件还是动态`prop`，都能实现预期的校验效果。在实际开发中，理解并灵活运用...
vue elementUI 表单校验（多层嵌套）【转载】
qq_30819871的博客
03-26 1390
在对多层嵌套表单进行表单校验的时候，遇到了一点坑，转载一篇亲测成功的教程供大家欣赏 原文地址：https://segmentfault.com/a/1190000014366951 嵌套对象的校验 项目中使用的vue+elementUI进行开发，已经用了有一段时间了，感觉表单校验是每一个前端开发人员都避免不了的需求。在一些前端可以自行校验的情况下，先通过前端校验，校验不通过不发送请求，直到满足校验规则，再发送请求给后端，从而提升用户体验。 elementUI对表单的校验有自己的方法，要求传入model的必须
vue基础：ElementUI的表单
jayLog的博客
02-11 7782
整理了ElementUI的表单组件的知识点，以及他在vue中的使用
【Element入门】3、Element UI 表单组件详解
最新发布
weixin_52938153的博客
05-22 1321
Element UI 是一款基于 Vue.js 的高效、简洁的前端组件库，专为开发者和设计师提供丰富的 UI 组件。它不仅易于上手，还具备高度的可定制性，能够满足多样化的项目需求。通过使用 Element UI，开发者可以快速构建高质量的现代 Web 应用，实现优雅且一致的用户界面，从而显著提升开发效率和用户体验。本系列文章深入探讨了 Element UI 的各项功能及最佳实践，帮助你在实际项目中更好地应用和优化这一强大的工具。
ElementUI-多层数据的表单验证
cookie-y的博客
03-14 831
ElementUi表单
关于element表单多层表单验证与动态验证的一些使用体会，仅个人记录，不建议参考
lvdoubing81的博客
12-06 1769
表单验证是用的比较多的了，前几天也有记录了关于element表单多层验证的坑，今天又踩了一下，才发现前几天的记录用处不大，对于表单验证也是一知半解，所以今天再次记录一下，估摸着有半桶水的水准了，听起来叮当响。 一. 关于 el-form 的 :model 和 v-model v-model 和 :model 其实不是同一个东西， v-model，是进行数据双向绑定的，:model是element用来进行表单验证的。 不管你的文本框v-model绑定了什么值，但假如说你没有在表单上:model来绑定验证的数
Element-Ui表单嵌套循环时的验证
wqewqeasxzcbn的博客
08-26 898
Element-Ui表单嵌套循环时的验证
表单嵌套的校验,以elementUi的form表单为例
C422805的博客
07-04 538
表单嵌套的校验,以elementUi的form表单为例
vue elementUI 表单校验的实现代码（多层嵌套）
10-16
主要介绍了vue elementUI 表单校验的实现代码（多层嵌套），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue elementUI 表单嵌套验证的实例代码
12-30
element中from组件内表单验证通过使用el-form标签，绑定model和rules属性进行表单验证 客户名称: size=small prop=belongId> <el v-show=false v-model=form.belongId></el> <ComSelectorCustom
一文掌握elementUI构建复杂表格，合并行或列，多级表头等
风中追风
01-02 5683
前端开发过程中常常会遇到各种开发表格的场景，有时候有的表格比较简单有的比较复杂（如下图简单示例所示，有合并项和多级表头），Elementui的el-table控件也可以支持构建复杂的表格，本文将指导你如何快速开发复杂表格~~~
Vue + element-ui form rules 校验特殊格式数据（嵌套校验）
weixin_69318621的博客
12-08 2488
Vue + element-ui form rules 校验特殊格式数据（嵌套校验）
vue+element多层表单校验prop和rules
学习记录
08-11 1657
如果都是定义的同一个属性名。
Vue - Element el-form 表单对象多层嵌套校验
iotjin的专栏
08-03 3163
针对el-form的数据源是对象嵌套对象，在进行数据绑定和校验时和单层的对象有一点区别，
elementui 表单嵌套表格，并且验证表格中的文本框
JJ_Smilewang的博客
02-10 2884
最近遇到一个需求，可以动态添加、修改、删除表格，并且添加时要对文本框进行验证，这也算是常规需求，故整理记录，供人参考。
element多层数据的form表单校验
shuishui_97的博客
01-31 840
form表单多层结构校验方式
vue+elementui表单数组对象深层嵌套之自定义验证规则
CiCi____的博客
06-07 1734
在Vue+Elementui项目中，需要在表单的循环数组中，对某一深层嵌套的对象属性制定自定义校验规则。
element 表单嵌套验证
weixin_43994434的博客
12-20 2394
需求如下：el-form-item下嵌套多个el-form-item，并且能进行表单验证 表单内部项绑定校验主要靠prop和rules，porp指明地址，rules声明规则 起先的思路是el-form-item =》el-form =》el-form-item循环，但是这样提交前要做两次校验。但是实际上只要按照一层一层往下写就行了，即直接el-form-item =》el-form-item循环 // 这边抽成了子组件 <template> <el-form-item .
elementUI form表单嵌套验证
Amy_happiness的博客
06-07 1031
设置有效时间时，需求是： 1. 选择时间是永久还是具体的日期 2. 如果选择日期，则日期不能为空，默认选项是选择日期样式解决方法：elementUI的文档中，关于form-item有个属性叫error，值的类型是string，如果传入空，则说明数据验证通过，如果不为空，则直接显示设置的错误文本。......
vue3 elementui多个表单校验
09-02
在Vue3中，可以使用Element UI实现多个表单校验。 首先，我们需要安装Element UI库，并在Vue组件中引入所需的表单组件。 ```bash npm install element-plus ``` 然后，在Vue组件中引入Element UI库和所需的表单组件。 ```vue <template> <el-form ref="form" :model="formData" :rules="formRules"> <el-form-item label="姓名" prop="name"> <el-input v-model="formData.name"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model="formData.age"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="validateForm">提交</el-button> </el-form-item> </el-form> </template> <script> import { ref } from 'vue'; import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus'; export default { components: { ElForm, ElFormItem, ElInput, ElButton, }, setup() { const formData = ref({ name: '', age: '', }); const formRules = ref({ name: [ { required: true, message: '请输入姓名', trigger: 'blur' }, ], age: [ { required: true, message: '请输入年龄', trigger: 'blur' }, { type: 'number', message: '年龄必须是数字', trigger: 'blur' }, { min: 18, max: 100, message: '年龄必须在18到100之间', trigger: 'blur' }, ], }); const validateForm = () => { // 触发表单校验 ref.$refs.form.validate((valid) => { if (valid) { // 表单校验通过，可以进行提交操作 console.log('表单校验通过'); } else { // 表单校验失败，无法提交 console.log('表单校验失败'); } }); }; return { formData, formRules, validateForm, }; }, }; </script> ``` 上述代码中，使用了`ElForm`、`ElFormItem`、`ElInput`和`ElButton`这些Element UI的表单组件来实现多个表单校验。这里定义了两个表单项"姓名"和"年龄"，分别设置了校验规则。通过点击提交按钮时，调用`validateForm`方法来触发表单校验，并根据校验结果进行相应的操作。 以上就是在Vue3中使用Element UI实现多个表单校验的方法。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值