如何实现element-ui校验多个表单项

最新推荐文章于 2024-07-25 18:52:07 发布

ceinez

最新推荐文章于 2024-07-25 18:52:07 发布

阅读量2k

点赞数 1

分类专栏：如何实现文章标签： vue javascript js es6 elementui

本文链接：https://blog.csdn.net/weixin_45075099/article/details/109218314

版权

本文介绍了在Vue项目中，利用Element-UI的validateField方法和Promise.all来解决对多个表单项进行同时校验的问题。通过案例展示了如何在项目场景中，确保所有表单项都配置完成的验证策略。

摘要由CSDN通过智能技术生成

项目场景：

表单内配置用户标签，可配置多个，一个标签全部项配置完毕才可新增。

解决方案：

官方文档

validateField 对部分表单字段进行校验的方法 Function(props: array | string, callback: Function(errorMessage: string))

validateField支持数组，并且它的回调函数是每个元素调一次。如果想实现需求中的校验全部项是否都配置完毕就需要用到Promise.all()。

<template>
	<div
        v-for="(tagItem, index) in form.detainConfigList"
        :key="index"
	>
		<el-form-item
          :prop="'detainConfigList.' + index+'.userTags'"
          :rules="[{ required: true, message: '请选择用户标签', trigger: ['blur', 'change'] }]"
          :label="'选择用户标签'+(index+1)+'：'"
        >
        	......
        	<el-button
            	v-if="index === form.detainConfigList.length-1"//仅最后一个标签可新增
            	class="button-box"
            	type="primary"
            	@click="addCardPackage(index)"
          	>
            	新增
          	</el-button>
          	<el-button
            	class