vue element-plus 表单重名验证

### Vue Element-Plus 实现场景下的表单字段名称唯一性校验 在构建复杂的动态表单时，确保字段名称的唯一性是一个常见的需求。为了实现在 Vue 3 和 Element Plus 中的表单字段名称唯一性校验，可以采用自定义验证规则的方式。 #### 自定义验证函数设计 创建一个用于检查字段名是否唯一的验证器函数，在该函数内部遍历当前所有的字段并判断新添加或修改后的字段名字是否存在重复情况： ```javascript // 定义全局变量存储已存在的字段名称列表 let existingFieldNames = []; const validateUniqueFieldName = (rule, value, callback) => { if (!value || !existingFieldNames.includes(value)) { // 如果为空则允许；如果不存在于现有集合内也视为合法 return callback(); } const index = rule.fullField.split('.').pop(); // 获取当前项索引 // 排除自身比较 let filteredList = [...existingFieldNames]; if(index !== undefined && Number.isInteger(Number(index))){ filteredList.splice(index, 1); } if(filteredList.includes(value)){ return callback(new Error('此字段名称已经存在')); }else{ return callback(); } }; ``` #### 将其集成至表单配置中 当初始化表单或者新增/编辑某个特定条目时更新 `existingFieldNames` 数组，并将其作为参数传递给对应的 rules 属性下指定字段的验证逻辑里去[^1]。 ```html <template> <el-form :model="dynamicForm" :rules="formRules"> <!-- 动态渲染表单项 --> <div v-for="(field, idx) in dynamicForm.fields" :key="idx"> <el-input v-model="field.name" placeholder="请输入字段名称" @change="updateExistingFieldNames(idx)"> </el-input> ... </div> <el-button type="primary" @click="submitForm">提交</el-button> </el-form> </template> <script setup lang="ts"> import { ref, reactive, onMounted} from 'vue'; const dynamicForm = reactive({ fields: [ { name: '' }, // 更多初始字段... ] }); onMounted(() => { updateExistingFieldNames(-1); // 初始化加载已有数据到 existingFieldNames }) function submitForm() {} function updateExistingFieldNames(currentIndex?: number){ existingFieldNames = dynamicForm.fields.map((item,idx)=>{ if(typeof currentIndex ==='number'&&currentIndex===idx)return ''; return item.name; }).filter(Boolean); formRules.fieldName.rules.push({ validator:validateUniqueFieldName }); } </script> ``` 上述代码片段展示了如何利用事件监听机制(`@change`)来实时同步最新的字段名称状态，并且每当发生变更都会触发一次重新计算以保持最新版本的数据一致性[^2]。 #### 关键点说明 - **双向绑定**：每个字段通过 `v-model` 双向绑定到了相应的对象属性上。 - **动态生成字段**：使用 `v-for` 来循环展示可变数量的表单项。 - **表单校验**：对于静态和动态产生的项目分别设置了固定的以及依据条件变化而调整的不同类型的检验规则。 - **删除功能**：确保每次操作都能正确反映到实际显示的内容之中。 - **状态管理**：借助 `reactive()` 函数配合侦听器 (`watch`) 达成对整个表单结构及其子元素变动的高度敏感响应能力。