elementui表单验证，验证效果和规则不对应

修改前的代码

<template>
   <div >
       <div>
           <el-form  label-width="0px"  :model='loginForm' :rules="loginFormRules">
               <!-- 用户名 -->
              <el-form-item prop="name">
                 <el-input  v-model="loginForm.username"></el-input>
              </el-form-item>
              <!-- 密码 -->
              <el-form-item >
                 <el-input v-model="loginForm.password" type="password"></el-input>
              </el-form-item>
              <!-- 按钮 -->
              <el-form-item >
                 <el-button type="primary">主要按钮</el-button>
              </el-form-item>
            </el-form>
       </div>
   </div>
</template>

<script>
export default {
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginFormRules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  }
}

</script>

修改前的效果

如图，只要失去了焦点，都会显示“请输入活动名称”，并且不会验证输入的长度。

解决

如图，划横线的三个名称必须相同，将下面的两个name改成username即可

修改后的效果