elementplus循环表单验证

### Element Plus 中实现循环表单验证的方法

在开发过程中，动态生成的表单字段（即循环表单）是一个常见的需求。为了确保这些动态字段的有效性和准确性，Element Plus 提供了一种强大的机制来处理这类场景下的表单验证。

#### 动态添加规则到表单域

当创建一个带有多个相同结构项目的表单时，可以通过数组的形式管理这些项目，并为每个项目设置独立的验证规则。对于每一个新增加或已存在的条目，都需要为其配置相应的校验逻辑[^1]。

// 定义初始数据模型
data() {
  return {
    dynamicValidateForm: {
      domains: [{ value: '' }]
    }
  };
},
rules: {
  'domains.*.value': [
    { required: true, message: '此项不能为空', trigger: 'blur' }
  ]
}

上述代码片段展示了如何利用通配符`*`为所有名为`value`属性指定相同的必填项约束条件。每当向`dynamicValidateForm.domains`数组中插入新对象时，该规则会自动应用于新的成员之上。

#### 自定义验证器的应用

除了使用预设好的简单规则外，还可以编写更复杂的业务逻辑作为自定义验证函数传递给特定字段。这允许开发者针对不同情况实施更加精细的数据检验策略。

methods: {
  addDomain() {
    this.dynamicValidateForm.domains.push({
      value: '',
      key: Date.now()
    });
  },
  removeDomain(item) {
    var index = this.dynamicValidateForm.domains.indexOf(item);
    if (index !== -1) {
      this.dynamicValidateForm.domains.splice(index, 1);
    }
  },
  submitForm(formName) {
    this.$refs[formName].validate((valid) => {
      if (valid) {
        alert('submit!');
      } else {
        console.log('error submit!!');
        return false;
      }
    });
  },
  customValidator(rule, value, callback) {
    // 这里可以加入任意复杂度的判断语句
    const isValid = /* some validation logic */;
    
    if (!isValid) {
      callback(new Error('不符合要求'));
    } else {
      callback();
    }
  }
}

在这个例子中，`customValidator` 方法被设计成接受三个参数：当前正在评估的规则(`rule`)、关联值(`value`)以及用于报告错误状态的回调函数(`callback`)。如果检测失败，则调用 `callback()` 并传入一个新的 `Error` 对象；反之则直接结束而不做任何操作，表示成功通过测试。

#### 组件模板部分

最后，在HTML模板内构建对应的UI控件并与JavaScript端保持同步更新：

<el-form :model="dynamicValidateForm" ref="dynamicValidateFormRef">
  <div v-for="(domain, index) in dynamicValidateForm.domains" :key="domain.key">
    <el-input placeholder="请输入内容"
              v-model.trim="domain.value"></el-input>
    <el-button @click.prevent="removeDomain(domain)">删除</el-button>
  </div>
  <el-button type="primary" @click="addDomain">新增</el-button>
  <el-button type="success" @click="submitForm('dynamicValidateForm')">提交</el-button>
</el-form>

这段标记语言描述了一个可增删输入框集合及其对应的操作按钮布局方式。每次点击“新增”都会触发 JavaScript 函数往列表末端追加一条记录；而按下某个“删除”按键将会移除相应位置上的那一组元素。