Avue 表单中如何动态设置某个字段的 required 验证规则？

司空柯欣提问于 2026-03-20 10:59:21 阅读 12

框架

我在用 Avue 做一个动态表单，有些字段是否必填要根据其他选项来决定。比如选了“个人”类型，身份证号就必填；选了“企业”，就不需要。我试过在 option 里直接改 rules，但好像没生效。

现在是这样写的：

this.option.column.forEach(col => {
  if (col.prop === 'idCard') {
    col.rules = [{ required: this.form.type === 'personal', message: '请输入身份证号' }];
  }
})

但切换类型后，验证规则没更新，还是按初始状态走。是不是得调什么刷新方法？或者有别的写法？

Avue

我来解答赞 2 收藏

反馈

1 条解答

打工人星辰 Lv1

你的问题在于直接修改 column 里的 rules 属性没有触发 Avue 的响应式更新。Avue 的 option 是响应式的，但嵌套对象属性的直接修改有时候不会触发视图更新。

两种解决思路：

第一种：用 $set 强制触发响应式

// 找到对应的 column，用 $set 修改 rules

const idCardCol = this.option.column.find(col => col.prop === 'idCard');

if (idCardCol) {

  this.$set(idCardCol, 'rules', [

    { required: this.form.type === 'personal', message: '请输入身份证号' }

  ]);

}

第二种：修改后重新赋值整个 option

// 这种方式更稳妥，确保触发更新

this.option.column = this.option.column.map(col => {

  if (col.prop === 'idCard') {

    return {

      ...col,

      rules: [{ required: this.form.type === 'personal', message: '请输入身份证号' }]

    };

  }

  return col;

});

另外提醒一下，required 这个属性最好也同步动态设置，因为有些场景下 Avue 会优先读 required 字段：

// 一起改更保险

this.option.column = this.option.column.map(col => {

  if (col.prop === 'idCard') {

    return {

      ...col,

      required: this.form.type === 'personal',

      rules: [{ required: this.form.type === 'personal', message: '请输入身份证号' }]

    };

  }

  return col;

});

如果切换后想立即触发验证，可以手动调用一下：

this.$nextTick(() => {

  this.$refs.form.validateField('idCard');

});

试试看，应该能解决你的问题。

2026-03-20 11:02