element表单校验

<template>
  <div>
    <h3><span class="ml20">创建活动</span></h3>
    <hr/>
    <div class="fromBox">
    <el-form ref="formLabelAlign" :rules="rule2" :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
      <el-form-item label="名称" prop="name">
        <el-input v-model="formLabelAlign.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="活动区域" prop="align">
        <div class="block">
         <el-select v-model="formLabelAlign.value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        </div>
      </el-form-item>
      <el-form-item label="活动形式" prop="activity">
        <el-checkbox-group v-model="formLabelAlign.checkList">
          <el-checkbox  label="upper">线上活动</el-checkbox>
          <el-checkbox label="lower">线下活动</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('formLabelAlign')">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Login',
  data(){

    var validateAlign = (rule, value, callback) => {
       if(!value){
          var sag = this.formLabelAlign.value==='';
          if(sag){
              return callback(new Error('请选择活动区域'));
          } 
         }
         return callback();
    }

    var validateActivity = (rule, value, callback) => {
      if(!value){
        var sag = this.formLabelAlign.checkList;
        if(sag.length==0){
            return callback(new Error('请选择活动形式'))
        }
      }
    }
    return{
       labelPosition: 'right',
       formLabelAlign: {
          name : '',
          value : '',
          checkList :['upper','lower']
       },   
        options: [{
          value: '1',
          label: '黄金糕'
        }, {
          value: '2',
          label: '双皮奶'
        }],
       rule2:{
         name:[
           { required: true, message: '请输入活动名称', trigger: 'blur' },
           { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
         ],
         align:[
           { validator: validateAlign, required:true, trigger:'blur' }
         ],
         activity:[
           { validator: validateActivity, required:true, trigger:'blur'}
         ]
       }
    };
  },
  methods: {
      handleChange(value) {
        console.log("触发事件");
        console.log(value);
      },
      onSubmit(formName){
        this.$refs[formName].validate(valid => {
          console.log("valid:" + valid);
        })
      }
  }

}
</script>
    
<style scoped>
.fromBox{ 
      width:400px;
      margin:0 auto;
    }
.ml20{
      margin-left: 20px;
}
hr{border-color: #fff; background: red;}
</style>