elementUI表单校验，在校验不通过时可以打印出值，校验通过反而不打印了
submitForm(formName) {
console.log(1111);
console.log("formName", formName);
this.$refs[formName].validate((valid) => {
if (valid) {
//不打印
this.$message({
showClose: true,
type: "success",
message:'校验通过啦！',
});
} else {
//打印了
this.$message({
showClose: true,
type: "error",
message: "表单验证失败！",
});
return false;
}
});
}
出现这种情况的原因，可能是还有以下三点导致：
1、表单在验证的时候出错了。
每个if条件都必须要有对应的else；并且每个条件 下 都要 callback！ 确保在每一种不同的情况下都会执行callback
//错误写法
let validate = (rule, value, callback) => {
if (!this.ruleForm.selDate) {
callback(new Error("请选择日期"));
}
};
//正确
let validate = (rule, value, callback) => {
if (!this.ruleForm.selDate) {
callback(new Error("请选择日期"));
} else {
callback();
}
};
2、命名传值问题导致
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
</el-form>
<el-button type="primary" :loading="btnLoad" @click="submitForm('ruleForm')">
提交
</el-button>
'ruleForm' 必须与<el-form>中的ref名称一致，且点击的时候这个名称必须以字符串的格式传值
**注意！！！这个名称不能为【name】，name是一个变量，会被识别为字符串属性，从而导致报错！**
3、也有可能是校验时表单的字段名称在data中没有被定义
