el-form验证问题

 prop的绑定需要与v-model绑定的值相同

v-model绑定的值必须要在:model=ruleForm里面定义

<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="shanghai">

</el-option>

<el-option label="区域二" value="beijing">

</el-option> </el-select>

</el-form-item>

<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>

<el-button @click="resetForm('ruleForm')">重置</el-button>

</el-form>

data() {
 
   return {

       ruleForm: { name: '',
 
                  region: '', 
                  },

},

 rules:{


    name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },

            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],

   region: [

            { required: true, message: '请选择活动区域', trigger: 'change' } 
          
          ],
},

},
 methods:{

      submitForm(formName) {

        this.$refs[formName].validate((valid) => {

          if (valid) {

            alert('submit!');

          } else {

            console.log('error submit!!');

            return false;

          }

        });

      },

      resetForm(formName) {

        this.$refs[formName].resetFields();

      }
}