vue3笔记（24）动态规则绑定

又有让我眉头一紧的新 feature 了，表格中某几项需要根据选择来确定规则，包含字符校验和必填项的改变。
这篇记录动态规则绑定及检验遇到的坑。

方法一

使用 v-if 多写几个 form-item，用 type 动态控制显示，但是这样的话会让已填项清空，舍弃。

方法二

根据选择的 type 动态设置 prop，不同的 prop 在 rule 中定义不同的规则。这里定义 path 为必填，path1 为非必填，

<el-form ref="menuFormRef" :model="menuForm" :rules="menuRules">
  <el-form-item label="前端路由：" :prop="menuForm.type == 1 ? 'path' : 'path1'">
    el-input v-model="menuForm.path" placeholder="请输入前端路由"></el-input>
  </el-form-item>
<el-form/>

const menuRules = reactive({
  path: [
    { required: true, message: '请输入前端路由', trigger: ['blur', 'change'] },
    { validator: validateText50Required, trigger: ['blur', 'change'] }
  ],
  path1: [
    { required: false, message: '请输入前端路由', trigger: ['blur', 'change'] },
    { validator: validateText50, trigger: ['blur', 'change'] }
  ]
})

问题来了，当切换类型时，出错提示依然显示；当手动点一下输入框（触发blur）或者点击提交按钮时，出错提示消失，可见校验规则是切换了。

方法三

手动根据状态改变 rule

<el-form-item
    label="前端路由："
    prop="fold"
    :rules="
      menuForm.type == 1
        ? menuRules.path
        : [{ validator: validateText50, trigger: ['blur', 'change'] }]
    "
  >
    <el-input v-model="menuForm.path" placeholder="请输入前端路由"></el-input>
  </el-form-item>

问题是当切换类型时，必填红色*没有消失。经过检验，规则也没有切换成功。这个方法是网友写过技术总结的，详情见附录，我实在不理解为啥到我这儿就失败了。。。

方法四

使用 watch 监听 type ，改变时直接将校验规则改变。
优势：完全实现了校验规则的切换。
劣势：切换时一定会触发一次全局规则校验（效果类似于点击了一次提交）

watch(
  () => state.menuForm.type,
  () => {
    if (state.menuForm.type == 1) {
      menuRules.path = [
        { required: true, message: '请输入前端路由', trigger: ['blur', 'change'] },
        { validator: validateText50Required, trigger: ['blur', 'change'] }
      ]
    }
    if (menuFormRef?.value) {
      menuFormRef?.value.clearValidate()
    }
  }
)

附录
[elementUI el-form动态控制表单验]https://blog.csdn.net/zuoyiran520081/article/details/118051248)