elementui 动态添加移除验证

Element UI 是一套基于 Vue.js 的开源 UI 组件库，它提供了一套丰富的表单验证功能。如果你想要动态地在 Element UI 中添加或移除验证规则，可以借助 Vue.js 的响应式特性以及 `el-form` 或 `el-input` 等组件的 `rules` 属性。

以下是动态添加和移除验证的基本步骤：

1. **初始化表单验证**:
首先，在数据中定义一个数组，用于存储验证规则，例如：

data() {
  return {
    dynamicRules: [
      { field: 'username', required: true, message: '请输入用户名' }
    ]
  };
}

2. **动态设置验证规则**:
当你需要添加新的验证规则时，可以在一个方法里操作这个数组，然后更新 `el-form` 的 `rules` 属性：

methods: {
  addRule(field, rule) {
    this.dynamicRules.push({ field, ...rule });
    this.$refs.myForm.validateField(field);
  },
  removeRule(field) {
    const index = this.dynamicRules.findIndex(r => r.field === field);
    if (index !== -1) {
      this.dynamicRules.splice(index, 1);
      // 如果需要从当前字段移除验证，调用 validateField 更新状态
      this.$refs.myForm.validateField(field, { resetFields: true });
    }
  }
}

3. **在模板中引用动态规则**:
在 HTML 模板上，你可以通过循环展示这些动态规则，并绑定到相应的表单元素：

<template>
  <el-form :model="formData" ref="myForm">
    <el-form-item v-for="(rule, index) in dynamicRules" :key="index">
      <label>{{ rule.label }}</label>
      <el-input v-model="formData[field]" :rules="rule"></el-input>
    </el-form-item>
    <!-- 添加按钮和移除按钮 -->
    <button @click="addRule('newField')">新增验证</button>
    <button @click="removeRule('newField')">删除验证</button>
  </el-form>
</template>