vue-element Form表單驗證（表單驗證沒錯卻一直提示錯誤）

在使用element-UI 的表單時，發生一個驗證錯誤，例如已輸入值但求驗證糾錯：

 

 

 

 

代碼如下所示：

 <el-form :model="correction" :inline="true" :rules="rules" ref="correctionForm"  class="demo-ruleForm" > 
           <el-form-item label="聯系人郵箱" prop="correctorEmail" label-suffix="sfdfsd">
                <el-input v-model="correction.correctorEmail" ></el-input>
            </el-form-item>
 </el-form>

rules: { correctorEmail: [ { required: true, message: '請輸入聯系人郵箱地址', trigger: 'blur' }, ], },

 

綁定都是沒有錯誤的，然后我們利用自定義校驗規則驗證

            this.$refs[formName].validate((valid) => { if (valid) { Http.fetch({ method: "post", url: `${master}/exter/catalog/correction`, data:vm.correction }).then((res)=>{ if (res.status == 200) { if (res.data.result) { vm.dialogFormVisible = false; //關閉對話框
 vm.$message({ showClose: true, message: '糾錯成功！', type: 'success' }); vm.loadData(); vm.disable = true; } else { vm.$message({ type: "error", title: '糾錯失敗', message: res.message, }); } } vm.disable = false; }) } else { console.log('error submit!!'); return false; } });

 

使用官網給出的這種形式，將value值打印出來，發現並不能獲取到input中的值。

顯示undefined最終發現，prop對應的不單單是rules規則里面的驗證項，同時應該對應着我們form-item下的v-model的值。

prop綁定的類要與el-form-item下的v-model的值相對應。我們將其做個修改便可以正常糾錯了。