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的值相对应。我们将其做个修改便可以正常纠错了。