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

最新推荐文章于 2025-07-01 15:43:58 发布

原创最新推荐文章于 2025-07-01 15:43:58 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

在使用 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>