[ElementUI]Element-UI表单验证输入正确结果却仍提示验证错误

2020.08.07
在进行 Vue 项目实战开发学习中，登录页面 Login.vue 的编写过程中，出现了表单验证时，输入了正确结果却仍然出现错误提示

出现上述错误结果的原因在于 el-form 标签的表单验证规则 :rules 下每一个表单项的 prop 属性的值与其下的 el-input 标签所绑定的 v-model 的 value 值不相同：

	<el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class='login_form'>
      <el-form-item prop="uname">
        <!-- 上方表单验证规则对象绑定的 prop 属性值的命名与下方 el-input 的 v-model 不相同 -->
        <el-input v-model="loginForm.username" prefix-icon="el-icon-user"></el-input>
      </el-form-item>
      <el-form-item prop="pwd">
        <!-- 这里也是 -->
        <el-input type="password" v-model="loginForm.password" prefix-icon="el-icon-lock"></el-input>
        <el-form-item class="login_btns">
          <el-button type='primary' @click="login" round>登录</el-button>
          <el-button type="info" @click="resetLoginForm" round>重置</el-button>
        </el-form-item>
     </el-form>

在 script 中的代码：

	data() {
        return {
            loginForm: {
                username:'',
                password:''
            },
            // form 表单的数据与下面表单验证规则对象的值命名均不一样
            loginRules: {
                uname: [
                    { required: true, message: '请输入登录用户名', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                pwd: [
                    { required: true, message: '请输入登录密码！', trigger: 'blur' },
                    { min: 6, max: 15, message: '长度在6 到 15 个字符', trigger: 'blur' }
                ]
            }
        }
    }

以上 HTML 和 script 两处代码注释的地方就是 element-ui 表单验证结果出错的原因之处。

结论：使用 Element-UI 的表单验证时，form 表单中所绑定的数据与表单验证规则对象中相应的规则的命名必须相同，否则，在进行表单验证时，输入结果后，表单验证无法读取 form 表单 v-model 绑定的数据，因为命名不一样，无法找到。

正确写法为： HTML:

<el-form-item prop="username">
  <el-input v-model="loginForm.username" prefix-icon="el-icon-user"></el-input>
</el-form-item>
<el-form-item prop="password">
  <el-input type="password" v-model="loginForm.password" prefix-icon="el-icon-lock"></el-input>
</el-form-item>

script：

data () 
	return {
    	loginForm: {
            username:'',
            password:''
        },
        loginRules: {
            username: [
                { required: true, message: '请输入登录用户名', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            password: [
                { required: true, message: '请输入登录密码！', trigger: 'blur' },
                { min: 6, max: 15, message: '长度在6 到 15 个字符', trigger: 'blur' }
            ]
        }
    }
}