vue2表单校验：el-form表单绑定数组并使用rules进行校验

已于 2024-08-27 20:17:18 修改
阅读量3.7k 收藏 50
点赞数 50
分类专栏： Vue 文章标签： vue.js elementui 前端
于 2024-08-17 17:56:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l_q_l/article/details/141283737
版权

 前言

vue项目中，大量使用element ui组件中的el-form来构建丰富且具有交互性的表单页面（官网：Element - The world's most popular Vue UI framework）。el-form提供了丰富的表单控件，如输入框、下拉框、日期选择器等，并支持表单校验、表单布局等功能。

其中，表单校验功能使用了async-validator，是一个表单异步校验库，用来检查用户输入是否符合要求，比如必填项是否填写等。官网地址：https://www.npmjs.com/package/async-validator，一个翻译过的blog（相比官网有缺失）：

了解本专栏 订阅专栏 解锁全文 超级会员免费看
我是飞鸟呀
关注
专栏目录
订阅专栏
【ElementUI 表单校验】一个 el-form-item 下多个表单校验（循环校验）
前端知识分享喵
06-07 3631
前端开发项目的过程中，批量表单循环校验是很常见的，如上图，动态添加奖励计算规则，把所有的表单放到了一个 el-form-item 下。也可以理解为 el-form-item 做了嵌套，外层当然也可以省略，样式做微调，下面通过代码来详细的看一下。不足之处，多多交流。
【Vue项目实战】常见的el-form表单校验整理==＞异步调接口校验手机号唯一性
Sabrina_cc的博客
07-18 3983
本文主要总结elementUI 中el-form的表单校验，手机号，邮箱，密码，并且提供了异步校验手机号唯一性的方法。
el-form 对表单对象里的数组项进行校验
NewMember0220的博客
08-13 400
template部分。
el-form表单数组的验证
书读百遍，其义自见
09-19 518
【代码】vue笔记。
【VUE】表单校验
SZnAl的博客
09-20 5919
使用 elementUI的表单，在数据为对象嵌套数组对象时检验内部对象为必填项时应该这样写。prop前加冒号(:) 等号后面，引号内使用 ` ` 拼接 加上[${index}]
Vue2黑马人力资源项目1（表单校验）
weixin_63298649的博客
04-30 287
绑定之后设置检验isAgree: [// 这里需要使用自定义验证validator// 不用required是因为它只能检测 null undefined ""// rule校验规则// value校验的值// callback函数-promise resolve reject// calback() callback(new Error('需要勾选'))value?callback() : callback(new Error('需要勾选'))
vue2表单校验：添加自定义el-form表单校验规则
最新发布
l_q_l的专栏
08-27 844
其中的自定义函数checkPeople，来自定义检查规则。rules:{people:[this.checkPeople(rule, value, callback) //自定义校验方法},//message: '请添加人员',],//自定义验证的逻辑if(!return callback(new Error(`请添加人员`));}else{//判断重复项i++) {j < i;j++) {
表单验证 ---- 在Vue2中使用ElementUI进行表单验证
weixin_68854196的博客
01-15 1702
在vue2中使用elementui表单的验证
vue elementUI 表单校验功能之数组多层嵌套
12-08
本篇文章将详细介绍如何在Vue Element UI中进行数组多层嵌套的表单校验。 当数据结构包含数组，并且数组内的对象也需要进行校验时，直接在父级`el-form`中通过`prop`属性绑定规则可能无法达到预期效果。这是因为`el...
Vue表单验证实例：el-form配合rules实现数据校验
在HTML部分，我们看到`<el-form>`标签被用来包裹登录表单，`model`属性绑定到Vue实例的数据对象`loginForm`，`label-width`设置为0px以隐藏表头。 2. **`rules`属性**： `rules`属性用于定义表单验证规则，这些...
Vue element-ui父组件控制子组件的表单校验操作
10-15
2. `el-form-item`的`prop`属性应与`v-model`中绑定的字段名一致。 当这两个条件都满足时，Element-UI的表单验证就能正常工作，能够根据设定的规则对用户输入进行验证，确保数据的完整性和准确性。 总的来说，Vue ...
【vue2】使用elementUI进行表单验证实操
YQCC1的博客
12-09 3642
UI与Vant组件库的导入、注册、使用方法。
【vue2】使用elementUI进行表单验证实操（附源码）
嗨，朋友你好！我是前端领域的工作者
03-20 8434
vue2使用elementUI完成表单验证。
el-form中数组(一重数组、二重数组以及多重数组)绑定检验的实例（prop以及rules的赋值）
都已经是第二年的立春、又何必执着于、当年的盛​夏呢？
02-12 5622
prop的绑定就有上文提到的这两种方式，因此不管是几重数组都是可以的（当然没有试过三重四重数组， 应该是可以的，当然项目中应该不会出现这种情况）
form表单中数组的校验
我的博客
11-11 7792
1，校验的form对象中，包含数组，对数组进行循环 <template> <div class="hello"> <el-form ref="form" :model="form" :rules="rules"> <!-- 对form中的数组进行校验 --> <div v-for="(item, index) in form.list" :key="index"> <el-form-it
el-form 校验
huanxin_94的博客
05-25 502
el-form 表单校验 1. 整体校验 // valid : true） / false this.$refs.myForm.validate(valid => { // valid == true : 校验通过 // valid == false: 校验未通过 if (!valid) { return false; } }) 2. 单独校验某个字段 // personName 文本框 prop 属性值 this.$refs.myForm.validateField('pe
vue2 表格加表单混用，实现表单校验
qq_44230631的博客
01-10 367
vue2,表格加表单混用，表格验证，数据绑定
vue2 + el-form表单的动态自定义的校验
qq_45599738的博客
01-29 1695
vue2 + el-form 表单的动态自定义校验处理
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值