1. 程式人生 > 程式設計 >解決vue+ element ui 表單驗證有值但驗證失敗問題

解決vue+ element ui 表單驗證有值但驗證失敗問題

一.如圖:有值但是驗證失敗

二.

<el-form :model="form" :rules="rules">
<el-form-item label="資料模板" prop="template" >
 <el-col :span="20">
  <el-input type="textarea" v-model="form.template" :rows="8" placeholder="請輸入資料模板" :readonly="true" ></el-input>
 </el-col>
</el-form-item>
</el-form>
export default {
data() {
 return {
  form: {
   template: null
  }
  rules: [
   template:{required: true,message: '資料模板不能為空',trigger: 'blur'}
  ]
 }
}
}

以上是正確的驗證例子。

三.

目前碰到兩種情況會導致驗證失敗,而且使用自定義驗證形式的時候發現value的值為undefined:

1.prop和v-model的值名稱不一致

1必須和2名稱保持一致,3處的變數也需和2處的prop保持一致

2.在data{}裡面沒有宣告變數也會導致驗證失敗,使獲取的值value值為undefined。

總結

以上所述是小編給大家介紹的解決vue+ element ui 表單驗證有值但驗證失敗問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回覆大家的。在此也非常感謝大家對我們網站的支援!
如果你覺得本文對你有幫助,歡迎轉載,煩請註明出處,謝謝!