Vue表单组件el-form校验规则rules,条件判断rules表单验证显示必填或非必填

在使用 Element UI(一个基于 Vue 的前端框架)的表单验证功能时,你可能想要实现一个规则,使得某些字段在特定条件下成为必填项,或者在满足某些条件时不允许为空。这通常通过自定义校验规则来实现。

复制代码
<template>
   <div class="psu-title">提交信息</div>
   <el-form :model="formData" :rules="rules" ref="form" label-width="150px">
     <el-form-item label="是否通过:" prop="auditStatus">
       <el-radio-group v-model="formData.auditStatus">
         <el-radio label="1">通过</el-radio>
         <el-radio label="0">不通过</el-radio>
       </el-radio-group>
     </el-form-item>
     <el-form-item label="备注备注:" prop="auditRemark" :rules="formData.auditStatus === '0' ? rules.auditRemark:[{require: false}]">
       <el-input type="textarea" maxlength="100" placeholder="请输入" :rows="4" show-word-limit v-model="formData.auditRemark"></el-input>
     </el-form-item>
   </el-form>
   <div style="text-align: right;">
     <el-button>确定</el-button>
     <el-button>取消</el-button>
   </div>
</template>
export default {
  data() {
    return {
      formData: {
        auditStatus: '',
        auditRemark: '',
      },
      rules: {
        auditStatus: [ { required: true, message: '请选择', trigger: 'change' }],
        auditRemark: [ { required: true, message: '请输入', trigger: 'blur' }],
      },
    };
  },
 
  methods: {
    //方法...
  },
};
</script>
相关推荐
zzzzzz3101 小时前
看 react-bits,不要只看“酷炫”:一套阅读动画交互组件库的框架
javascript·react.js·动效
香芋芋圆9 小时前
AI 冲击内卷之下,普通前端如何破局?WebGIS—— 低门槛突围赛道
前端·javascript·人工智能·学习·职场发展
INS_KF9 小时前
【编程笔记】成员函数中两个 const 的区别(const Data &getData() const;)
前端·javascript·笔记
宿67410 小时前
vue3-async
前端·javascript·vue.js
excel11 小时前
Nuxt + Twin CSS 中宽度超过屏幕时底部出现空白的原因与解决方案
前端·javascript
一个游离的指针14 小时前
函数管道:消除深度嵌套调用
前端·javascript
柚yuzumi14 小时前
前端优化,从少触发一次开始:防抖与节流
前端·javascript
默_笙15 小时前
🚤 CSS 布局的"圈地运动":BFC 就是浏览器的独立领地
前端·javascript
用户9385156350715 小时前
大模型记忆指南:从短时缓存到永久记忆,手把手带你吃透 LangChain Memory 管理
javascript·人工智能
xqchen15 小时前
Web Components 普及困境深度解析:技术标准与工程实践的落差
javascript