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>
相关推荐
你的人类朋友16 分钟前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手33 分钟前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
一只小灿灿1 小时前
前端计算机视觉:使用 OpenCV.js 在浏览器中实现图像处理
前端·opencv·计算机视觉
前端小趴菜051 小时前
react状态管理库 - zustand
前端·react.js·前端框架
Jerry Lau1 小时前
go go go 出发咯 - go web开发入门系列(二) Gin 框架实战指南
前端·golang·gin
我命由我123452 小时前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js
0wioiw02 小时前
Flutter基础(前端教程③-跳转)
前端·flutter
落笔画忧愁e2 小时前
扣子Coze纯前端部署多Agents
前端
海天胜景2 小时前
vue3 当前页面方法暴露
前端·javascript·vue.js
GISer_Jing2 小时前
前端面试常考题目详解
前端·javascript