Element-Form表单单独取消某一项的校验

业务场景:

**活动区域下拉框的值,选择为区域二时,显示活动形式(必填项)。

活动区域下拉框的值,选择为区域一时,活动形式则隐藏,因为活动形式为必填项,点保存是走ruleForm检验valid返回false,所以下面代码会报错走 console.log('error submit!!');

**
解决方案如下:

javascript 复制代码
使用>>  :rules={}
:rules="rules"  //注意:rules不能改 ;
 
后面的rules要与data=>return里rules名称相同,根据自己情况写 ;
 
里面的prop也不能少;
 
:model="ruleForm"也不能少
javascript 复制代码
    <el-form-item label="活动形式" prop="desc" v-show="ruleForm.region==2" :rules="{required:changeValue=='2?true:false,message:'请填写活动形式'}">
    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
  </el-form-item>
javascript 复制代码
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域" prop="region">
    <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="1"></el-option>
      <el-option label="区域二" value="2"></el-option>
    </el-select>
  </el-form-item>
    <el-form-item label="活动形式" prop="desc" v-show="ruleForm.region==2" :rules="{required:changeValue=='2?true:false,message:'请填写活动形式'}">
    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
  </el-form-item>
   <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
    <el-button @click="resetForm('ruleForm')">取消</el-button>
  </el-form-item>
</el-form>
javascript 复制代码
<script>
  export default {
    data() {
      return {
      	  changeValue:	'',
          ruleForm: {
          name: '',
          region: '',
          desc: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          //desc: [
            //{ required: true, message: '请填写活动形式', trigger: 'blur' }
         // ]
        }
      };
    },
    methods: {
    changeType(val){
        this.changeValue=val
    },
    //保存
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
            //调接口...
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //取消
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>
相关推荐
书源14 小时前
灵活性和可维护性,被严重低估的编程原则
前端·javascript·vue.js
前端啵啵猪14 小时前
useCallback 和 useMemo,什么时候用才是有效的?
前端·react.js
计算机学姐14 小时前
基于Python的旅游数据分析可视化系统【2026最新】
vue.js·后端·python·数据分析·django·flask·旅游
星哥说事14 小时前
跨平台开源笔记神器,用DeepSeek写笔记 , 效率翻倍
前端
喜欢你,还有大家14 小时前
FTP文件传输服务
linux·运维·服务器·前端
该用户已不存在14 小时前
你没有听说过的7个Windows开发必备工具
前端·windows·后端
Bi15 小时前
Dokploy安装和部署项目流程
运维·前端
普通网友15 小时前
前端安全攻防:XSS, CSRF 等防范与检测
前端·安全·xss
携欢15 小时前
PortSwigger靶场之Reflected XSS into attribute with angle brackets HTML-encoded通关秘籍
前端·xss