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