vue3怎么动态控制表单的rules

在 Vue 3 中，动态控制表单验证规则通常通过 `v-model` 和 `v-bind` 或者响应式数据绑定来实现。Vue 的 `v-model` 是双向数据绑定的核心，它可以根据数据的变化实时更新视图，反之亦然。

假设你有一个包含动态 rules 的表单组件，可以这样做：

<template>
  <form @submit.prevent="validateForm">
    <input v-model="form.input" :rules="dynamicRules['input']" />
    <!-- 其他表单项... -->
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        input: '',
      },
      dynamicRules: {
        input: [{ required: true, message: '输入不能为空', trigger: 'blur' }],
        // 根据业务需求添加更多字段的验证规则
      },
    };
  },
  methods: {
    validateForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log('提交成功');
        } else {
          console.log('验证失败');
        }
      });
    },
  },
};
</script>

在这个例子中，`dynamicRules` 对象是一个映射，键是表单字段名，值是对应的验证规则。当你需要改变某个字段的规则时，只需要修改数据对象即可。