el 表单怎么动态校验prop

Question

:prop 是动态的赋值的，当值为true时赋上password，界面上小红星是显示了，但是不校验，请问遇到动态校验的怎么解决呢，感谢

<el-form-item label ="密码" :prop ="is_show?'password':''"v-show="is_show"\>
    <el-input type="password" v-model="ruleForm.password"></el-input>
</el-form-item>

Answer 1

<el-form-item v-show="is_show"
    label ="密码"
    prop ="password"
    :rules="[
      { required: is_show, message: '请输入密码', trigger: 'blur' },
    ]">
    <el-input type="password" v-model="ruleForm.password"></el-input>
</el-form-item>

Answer 2

v-show只是简单的进行css切换，可以考虑用v-if来条件渲染，这样表单也不会校验该prop。

<el-form-item label ="密码" prop ="password" v-if="is_show">
    <el-input type="password" v-model="ruleForm.password"></el-input>
</el-form-item>

参考v-if与v-show区别

Answer 3

推荐你修改rules对象内的值，比如，show为true 的时候，rules内的passwordr的值为

{
  required： true, 
  trigger: 'blur'
}

为false 的时候，required为false, 就行了