vue＋elementui表单校验没有效果

在点击提交之前应该保证输入框中用户填入了数据，所以使用elementUI中的rules进行校验

本人遇到的问题; 即使填入了数据还是显示没有数据

本人的书写错误在于 el-form-item中的prop与el-input所绑定的不是名字不一致：

正确的应该如下：

rules为校验规则
ref和model都是必须要有的
:model="loginForm"中loginFrom应是一个对象 在data中声明

<el-form ref="loginFormRef" :model="loginForm" :rules="loginRules">
            <el-form-item prop="username">
                <el-input prefix-icon="iconfont icon-touxiang" v-model="loginForm.username" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input  prefix-icon="iconfont icon-mima" v-model="loginForm.password" placeholder="请输入密码"></el-input>
            </el-form-item>
        </el-form>

loginForm:{
         username:'',
         password:''
},
loginRules:{
         username:[
            { required: true, message: '请输入账号密码', trigger: 'blur' },
            { min: 3, max:10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
         ],
         password:[
            { required: true, message: '请输入账号密码', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
         ]
     }

在点击提交按钮时触发事件

login(){
	this.$refs.loginFormRef.validate(async valid=>{	
	//当都填入数据 valid为true
	if(!valid) return; //如果没有填入则不再执行以下代码
	//以下代码是发请求。。。
	...
	})
}