ElementUI表单校验不生效

问题：vue中使用element-ui进行表单校验的时候，必填项按照规则输入，但是一直不通过，问题如下图：解决办法：出现问题的原因是 v-model 和 :model 的区别问题（ v-model 通常是用于 input 的双向绑定，但是它不会向子组件传递数据；而：model 表示绑定自定义的属性，它只是将父组件的数据传递给子组件，没有实现父子组件间的数据双向绑定）。我在 form 表单中使用

超级_小菜鸟

13758人浏览 · 2020-11-19 10:20:22

超级_小菜鸟 · 2020-11-19 10:20:22 发布

问题1：vue中使用element-ui进行表单校验的时候，必填项按照规则输入，但是一直不通过，问题如下图：
在这里插入图片描述

解决办法：
出现问题的两种原因：
1. v-model 和 :model 的区别问题（ v-model 通常是用于 input 的双向绑定，但是它不会向子组件传递数据；而 :model 表示绑定自定义的属性，它只是将父组件的数据传递给子组件，没有实现父子组件间的数据双向绑定）。我在 form 表单中使用了 v-model 所以出现了错误.
2. el-form-item 的 prop 值要与 form 标签 :model 中的值保持一致，表单验证时就会验证 el-input 元素绑定的变量 loginForm.username 的值是否符合验证规则
  附件官方prop使用说明
正确使用如下：

<el-form :model="loginForm" :rules="loginFormRules" label-width="0px" class='login_form'>
	<el-form-item prop='username'>
		<el-input v-model='loginForm.username' prefix-icon="iconfont icon-user"></el-input>
	</el-form-item>
</el-form>