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

业务场景：
**活动区域下拉框的值，选择为区域二时，显示活动形式（必填项）。
活动区域下拉框的值，选择为区域一时，活动形式则隐藏，因为活动形式为必填项，点保存是走ruleForm检验valid返回false，所以下面代码会报错走 console.log(‘error submit!!’);
**
解决方案如下:

使用>>  :rules={}
:rules="rules"  //注意:rules不能改 ;
 
后面的rules要与data=>return里rules名称相同,根据自己情况写 ;
 
里面的prop也不能少;
 
:model="ruleForm"也不能少
1
2
3
4
5
6
7
8

    <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>
1
2
3

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47