使用vue + antd表单实现循环校验

### 使用 Vue 和 Ant Design 实现循环校验 为了实现基于 Vue 和 Ant Design 的表单组件中的循环校验功能，可以利用 `rules` 属性来定义验证规则，并通过自定义验证函数处理复杂的逻辑。下面是一个具体的例子说明如何设置这种机制。 首先，在创建表单项时指定要应用的验证规则： ```javascript const rules = { items: [ { required: true, message: '请输入内容', trigger: 'blur' }, ({ getFieldValue }) => ({ validator(_, value) { const allItems = getFieldValue('items'); let hasDuplicate = false; if (Array.isArray(allItems)) { const uniqueValues = new Set(); for (let i = 0; i < allItems.length; ++i) { if (!allItems[i]) continue; if (uniqueValues.has(allItems[i])) { hasDuplicate = true; break; } uniqueValues.add(allItems[i]); } if (hasDuplicate) { return Promise.reject(new Error('不允许重复项')); } else { return Promise.resolve(); } } return Promise.resolve(); }, trigger: ['change'] }) ] }; ``` 接着初始化表单模型并关联上述规则到对应的字段上： ```html <a-form :model="formState" :rules="rules"> <!-- 动态渲染多个输入框 --> <div v-for="(item, index) in formState.items" :key="index"> <a-input-number v-model:value="formState.items[index]" /> </div> <a-button type="primary" @click="handleSubmit">提交</a-button> </a-form> ``` 最后编写提交按钮点击事件处理器来进行最终的数据有效性检查： ```javascript methods: { handleSubmit() { this.$refs.formRef.validateFields().then(() => { console.log('数据有效:', this.formState); }).catch(info => { console.error('验证失败:', info); }); } } ``` 此方法允许开发者针对特定业务需求灵活调整验证逻辑，确保每次修改都能触发相应的检验流程[^1]。