el-form动态检验无法生效问题(已解决)

要对el-form里面的字段动态生成校验规则,测试了一系列的骚操作也无法生效,要么是require视图生效了,校验规则还是不生效;看了csdn里面好多方案,都是废话,废话,直接上硬货,最终总结如下:

javascript 复制代码
         <el-form :rules="rules" ref="auditForm" :model="auditForm" label-width="100px">
            <el-form-item label="审核结果:" prop="auditStatus">
              <el-radio-group v-model="auditForm.auditStatus" @change="updateFormRules">
                <el-radio label="Y">通过</el-radio>
                <el-radio label="N">不通过</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="审核意见:" prop="remark">
              <el-input
                v-model="auditForm.remark"
                placeholder="请输入"
                type="textarea"
                :rows="2"
                clearable
                maxlength="200"
                show-word-limit
              />
            </el-form-item>
          </el-form>

需求描述:选择审核结果为"N",不通过时,审核意见为必填,否则为不必填。

原本的rules里面不必去填写审核意见的校验

javascript 复制代码
     rules: {
        auditStatus: [{ required: true, message: '请选择', trigger: 'blur' }]
      },

方案一:监听审核结果的change事件,去动态增加审核意见的规则

方案二:使用watch去监听审核结果的值,去动态增加审核意见的规则

javascript 复制代码
    updateFormRules () {
      if (this.auditForm.auditStatus === 'N') {
        this.$set(this.rules, 'remark', [
          { required: true, message: '请输入审核意见', trigger: 'blur' },
          { min: 3, max: 200, message: '长度在 3 到 200 个字符', trigger: 'blur' }
        ]);
      } else {
        this.$set(this.rules, 'remark', []);
      }
      this.$nextTick(() => {
        this.$refs.auditForm.clearValidate(); // 清除表单验证规则
        this.$refs.auditForm.validate(); // 重新验证表单
      });
    },```
    
相关推荐
01传说20 分钟前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
小李飞飞砖27 分钟前
React Native 组件间通信方式详解
javascript·react native·react.js
小李飞飞砖28 分钟前
React Native 状态管理方案全面对比
javascript·react native·react.js
烛阴1 小时前
Python装饰器解除:如何让被装饰的函数重获自由?
前端·python
千鼎数字孪生-可视化2 小时前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月2 小时前
7月10号总结 (1)
前端·css·css3
天天扭码2 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder2 小时前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte2 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang2 小时前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程