有關elementui form驗證問題，有值卻仍然顯示不通過

關於elementui form表單的驗證，明明填寫了正確的值卻顯示驗證還沒通過可能存在的原因（個人看法，有不正確的請指出）：

1、首先需要保證表單上的 :model=" "和prop=" "綁定正確；下面是官網的例子：

<el-form ref="loginForm" v-model="loginForm" :rules="rules" label-width="80px">
      <h3 class="title">管理系統</h3>
      <el-form-item label="用戶名" prop="username">
         <el-input v-model="loginForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密碼" prop="password">
         <el-input type="password" v-model="loginForm.password" @keydown.enter.native="doLogin()"></el-input>
      </el-form-item>
      <el-form-item>
         <el-button style="width: 280px" type="primary" @click="doLogin()">登錄</el-button>
      </el-form-item>
</el-form>

export default {
    data() {
      return{
        loginForm:{
          username:'',
          password:''
        },
        rules:{
          username:[{required: true, message: '請輸入用戶名', trigger: 'blur'}] ,
          password:[{required: true, message: '請輸入密碼', trigger: 'blur'}] 
        }
      }
    }
}

2、驗證時提示：[Element Warn][Form]model is required for validate

這種警告是綁定model錯誤的警告，意思就是說，你不應該用v-model的形式去綁定form，而應該用:model去綁定

正確的寫法是：

 

 

以上所述僅僅是其中一種情況，有可能是你的寫法不規范，像prop的值與rules下的校驗字段值不一致。

 

另外感謝https://blog.csdn.net/Fture_Bird/article/details/86504941?utm_medium=distribute.pc_relevant.none-task-blog-baidujs-2