vue3-05-Element-plus中表单校验：校验对象中的对象的属性，校验对象中的数组中的对象的属性，校验嵌套对象

最新推荐文章于 2024-09-30 16:19:08 发布
最新推荐文章于 2024-09-30 16:19:08 发布
阅读量490 收藏 2
点赞数 5
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64150479/article/details/142410631
版权

目录

这两天写vue3项目，用了element-plus库，到了表单规则验证的环节，我发现我只会校验对象中的普通属性，如果校验嵌套对象，我就不怎么会了，去网上搜了一下，做一下总结，如果后续还有其他，我会继续进行补充

一、校验对象中的普通属性

  • 校验对象如下：校验 TaskForm 中的 task_name 属性

在这里插入图片描述

  • 校验方法：

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

二、校验对象中对象的属性

  • 校验对象如下：校验 TaskForm 中的 msg_text 中的 text 中的 content 属性

在这里插入图片描述

  • 校验方法：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、校验对象中的数组中的对象的属性

校验对象如下：校验 TaskForm 中的 msg_text 中的 at 中的 atMobiles[0] 中的 name 属性
在这里插入图片描述
校验方法如下：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

唐小橘子
关注
vue3-element-plus表单校验和多选表格table的基本使用
weixin_68658847的博客
04-11 1396
vue3-element-plus表单校验和多选表格table的基本使用
vue3 element plus 表单验证 数组嵌套对象格式验证 动态验证等
weixin_43512977的博客
11-28 3970
vue3 element plus 表单验证 数组嵌套对象格式验证 动态验证等
前端Vue3+element-plus表单输入框实现Cron表达式校验
wdm891026的博客
09-21 1489
5、但是由于用户的使用习惯不同，你可能需要开启其他的配置，比如需要支持秒，那就需要设置seconds为true来开启支持，如果设置为false，则保持不支持。下面代码中，列举了四个其他开启配置项，可通过阅读代码中的注释部分来理解。4、使用，上一步从’cron-validator’导入{ isValidCron }，就可以使用isValidCron('* * * * *')进行判断，开发使用框架为vue3+element-plus，于是选择cron-validator依赖。
vue3 element-plus中自定义组件触发el-form表单校验
ZL3064436257的博客
12-14 1879
vue3 element-plus中自定义组件触发el-form表单校验
vue3+element-plus 表单校验和循环form表单校验
qq_53722480的博客
06-03 668
正常表单校验`、循环校验、
Vue3 Element-plus 多表单同时校验
Mr. Zhang Xiaojian's Blog
06-18 443
【代码】Vue3 Element-plus 多表单同时校验。
Vue3、Element Plus使用v-for循环el-form表单进行校验
m0_67584973的博客
06-13 1723
在开发中遇到了这样一个需求有一个form是通过v-for生成出来的，并且数量不确定，每个表单中的字段都需要做校验，就将自己的解决方法记录了下来。
[vue3 + element-plus] 表单中清除单个字段的校验效果
Juihui822的博客
06-06 3574
【代码】[vue3 + element-plus] 表单中清除单个字段的校验效果。
vue elementUI 表单校验功能之数组多层嵌套
10-16
本文将深入探讨如何在 Vue Element UI 中实现针对这种数据结构的表单校验。 在 Vue Element UI 中，`el-form` 和 `el-form-item` 组件用于创建表单和表单项，并且通过 `v-model` 和 `prop` 属性进行数据绑定和验证...
Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
在Vue.js框架中，Element-UI是一个非常流行的UI组件库，它提供了丰富的界面元素和功能，使得开发者可以快速构建美观的后台管理系统。本项目“Vue ~ element-ui 动态表单验证”是针对Vue和Element-UI的一个应用场景，...
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 770
Vue 2 中使用 Vue I18n 插件实现中英文切换
vue3 实现文本内容超过N行折叠并显示“...展开”组件
Angel_Tears_的博客
09-28 1150
> 组件内文字样式取决与外侧定义 > 组件大小发生变化时,文本仍可以省略到指定行数 > 文本不超过时, 无展开,收起按钮 > 传入文本发生改变后, 组件展示新的文本
Vue 技术进阶 day2 数据监视的原理、其他内置指令、自定义指令、生命周期、组件化、VueComponent构造函数
最新发布
2301_77358195的博客
09-30 847
自定义指令
Thinkphp/Laravel基于vue的少数民族民歌网络图书馆管理系统
abo2022的博客
09-30 1116
ThinkPHP是一个快速、简单的基于MVC和面向对象的轻量级PHP开发框架，遵循Apache2开源协议发布，从诞生以来一直秉承简洁实用的设计原则，在保持出色的性能和至简的代码的同时，尤其注重开发体验和易用性，并且拥有众多的原创功能和特性，为WEB应用开发提供了强有力的支持Laravel非常的简洁并且是开源的，Laravel 是一个具有表现力、优雅语法的 Web 应用程序框架. Laravel 是构建现代全栈 Web 应用程序的最佳选择.
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 506
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
Vue.js组件开发教程
q903249871的博客
09-29 1187
组件是 Vue.js 应用程序的基本构建块。它们是独立且可复用的代码块，可以包含模板、逻辑和样式。提高代码的可维护性实现代码复用使应用结构更加清晰子组件可以通过$emit方法向父组件发送事件。组件是构建 Vue.js 应用程序的基石。通过本教程，您应该对如何创建和使用组件有了基本的了解。继续探索 Vue.js 的组件系统，可以让您的应用更加模块化、可维护和强大。希望这份教程对您有所帮助，祝您在 Vue.js 的学习和开发中取得成功！
Vue.js与Flask/Django后端的配合----案例详细说明
l1337224493的博客
09-29 1181
通过以上案例，我们展示了如何将Vue.js与Flask或Django后端结合使用，以构建一个完整的Web应用。前后端分离的架构使得开发更加灵活，能够独立处理前端和后端的功能。Flask和Django为后端提供了强大的支持，而Vue.js则为用户界面提供了流畅的体验。在实际开发中，还可以根据项目需求扩展更多功能，如用户权限管理、评论系统、文章分类等。无论是使用Flask还是Django，核心思想是通过RESTful API实现前后端的高效协作，为用户提供优质的应用体验。
element-plus中form表单校验输入框必须是整数而且大于600
09-13
在Element Plus中，如果你需要对表单输入框进行校验，确保用户输入的是大于600的整数，你可以使用Vuelidate或VeeValidate这样的表单验证库来进行校验。 使用Vuelidate时，你可以通过定义一个特定的属性来存储校验规则，并在模板中使用`v-validate`指令来指定校验规则。以下是一个简单的示例： ```vue <template> <el-form ref="form" :model="form" label-width="100px"> <el-form-item label="输入框"> <el-input v-model.number="form.number" v-validate="'required|integer|min:600'"></el-input> <span class="el-form-error" v-if="errors.has('number')">{{ errors.first('number') }}</span> </el-form-item> </el-form> </template> <script> import { required, integer, min } from 'vuelidate/lib/validators'; export default { data() { return { form: { number: null } }; }, validations: { form: { number: { required, integer, min: min(600) } } } }; </script> ``` 在这个例子中，我们定义了一个名为`form`的数据对象，其中包含一个`number`属性。我们通过`v-model.number`确保输入值是一个数字，并通过`v-validate`指令来应用规则。这些规则包括`required`（必填）、`integer`（必须是整数）和`min(600)`（必须大于或等于600）。 如果你使用的是VeeValidate，可以这样写： ```vue <template> <el-form ref="form" :model="form" label-width="100px"> <el-form-item label="输入框"> <el-input v-model="form.number"></el-input> <el-form-item v-if="errors.has('number')" class="error"> <el-error>{{ errors.first('number') }}</el-error> </el-form-item> </el-form-item> </el-form> </template> <script> import { required, integer, min } from 'vee-validate/dist/rules'; import { extend } from 'vee-validate'; // 添加需要的校验规则 extend('required', required); extend('integer', integer); extend('min', min); export default { data() { return { form: { number: null } }; }, rules: { number: 'required|integer|min:600' } }; </script> ``` 在这个例子中，我们使用了VeeValidate的`rules`属性来定义校验规则，并通过`el-error`组件来显示错误信息。 请注意，Element Plus原生的表单验证是基于HTML5的验证属性，如`required`, `type`, `pattern`等，但对于复杂的校验逻辑，如必须是大于600的整数，使用Vuelidate或VeeValidate这样的库会更加方便。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值