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(); // 重新验证表单
      });
    },```
    
相关推荐
无羡仙3 分钟前
AI终于‘看见’网页了!Stagewise让UI修改从‘盲调’变‘指哪打哪
前端
柯腾啊1 小时前
“Script error.”的产生原因和解决办法
前端·javascript·浏览器
沙漠之皇1 小时前
ts 定义重复对象字段
前端
HashTang2 小时前
不用再配服务器了!这套 Next.js + Cloudflare 模板,一个人搞定全栈出海
前端·后端·边缘计算
Cory.眼2 小时前
WebRTC入门指南:实时通信零基础
javascript·webrtc·实时通信
前端架构师-老李2 小时前
16 Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
一只学java的小汉堡2 小时前
HTML 01入门:从概念到开发环境搭建与页面头部配置
前端·css·html
拖拉斯旋风2 小时前
📚 JavaScript 变量声明三剑客:`var`、`let`、`const` 学习笔记
javascript
用户21496515898753 小时前
从零搭建uniapp环境-记录
前端
可触的未来,发芽的智生4 小时前
追根索源:换不同的词嵌入(词向量生成方式不同,但词与词关系接近),会出现什么结果?
javascript·人工智能·python·神经网络·自然语言处理