使用vue中的表單驗證時，重新輸入的value不被檢驗

•遇到的問題：

重新在輸入框輸入的數據，不能被檢測。錯誤效果圖如下：

      使用的代碼是：

<div class="login-form">
                <el-form ref="form" label-width="0px" :model="loginForm" :rules="loginRules">
                    <el-form-item prop="name">
                        <el-input prefix-icon="el-icon-user-solid" v-model="loginForm.username"></el-input>
                    </el-form-item>
                    <el-form-item prop="pwd">
                        <el-input prefix-icon="el-icon-unlock" v-model="loginForm.password" type="password"></el-input>
                    </el-form-item>
                    <div class="login-btn">
                        <el-button type="primary">登陸</el-button>
                        <el-button type="primary">注冊</el-button>
                        
                    </div>

                </el-form>
            </div>

data(){
       return {
           loginForm:{
               username:"小白",
               password:"123",
           },
           loginRules:{ name:[ {required:true,message:"請輸入用戶名",trigger:"blur"},
                    { min: 2, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }
               ],
               pwd:[
                   {required: true, message:'請輸入', trigger: 'blur'} ] }
       }
   }

預期的結果是：每次輸入數據，在輸入框失去焦點之后，數據就會被檢測。

•問題所在：rules中的對象(本例中是loginRules)的屬性名必須和數據雙向綁定v-model中的命名要一致：

所以需要把loginForm中的name改成username，把pwd改成password。

以下為修改后的部分代碼：

loginRules:{
               username:[
                   {required:true,message:"請輸入用戶名",trigger:"blur"},
                    { min: 2, max: 5, message: '長度在 3 到 5 個字符', trigger:'blur' }
               ],
               password:[
                //    {required: true, message:'請輸入', trigger: 'blur'}
                   {required: true, min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger:'blur' }
                ]
           }

　　讓屬性的命名保持一致后，表單數據就可以成功驗證啦。

可喜可賀，哈哈~