vue3添加行表单校验

### Vue3 动态表单校验实现方法 在 Vue3 中，动态表单的创建和校验可以通过组合 `v-model` 和 Element Plus（基于 Vue3 的 Element UI 版本）来完成。Vue3 提供了强大的响应式机制，而 Element Plus 则提供了内置的表单校验功能。 以下是详细的实现方式： #### 1. 安装依赖 首先需要安装 Vue3 和 Element Plus： ```bash npm install vue@next element-plus ``` #### 2. 创建动态表单结构 定义一个数据模型用于存储动态表单项，并通过 `v-for` 渲染这些项。 ```javascript <script setup> import { reactive } from 'vue'; const formData = reactive({ items: [ { name: '', description: '' } ] }); // 添加新表单项的方法 function addItem() { formData.items.push({ name: '', description: '' }); } // 删除指定索引的表单项 function removeItem(index) { if (formData.items.length > 1) { formData.items.splice(index, 1); } } </script> <template> <div v-for="(item, index) in formData.items" :key="index"> <el-form-item label="名称" prop="name"> <el-input v-model="item.name"></el-input> </el-form-item> <el-form-item label="描述" prop="description"> <el-input v-model="item.description"></el-input> </el-form-item> <button @click="removeItem(index)">删除</button> </div> <button @click="addItem">新增</button> </template> ``` #### 3. 配置表单校验规则 利用 Element Plus 的 `rules` 属性配置校验逻辑。 ```javascript <script setup> import { reactive } from 'vue'; import { ElForm, ElFormItem, ElInput } from 'element-plus'; const formRef = ref(null); const rules = reactive({ name: [{ required: true, message: '请输入名称', trigger: 'blur' }], description: [{ required: true, message: '请输入描述', trigger: 'blur' }] }); const validateForm = () => { return formRef.value.validate((valid) => { if (!valid) { console.log('校验失败'); return false; } console.log('校验成功'); return true; }); }; </script> <template> <el-form ref="formRef" :model="formData" :rules="rules"> <!-- 表单项渲染 --> </el-form> <button @click="validateForm">提交</button> </template> ``` #### 4. 处理动态添加后的校验更新 当动态添加新的表单项时，需手动调用 `clearValidate` 方法清除之前的错误提示，再重新触发校验[^3]。 ```javascript function addItem() { const newItem = { name: '', description: '' }; formData.items.push(newItem); nextTick(() => { formRef.value.clearValidate(); }); } ``` 以上代码展示了如何在 Vue3 中使用 Element Plus 构建具有动态增减功能的表单，并为其添加必要的校验规则。 --- ###