elementUI表单验证不起作用

项目中有用到elementUI,登录页有用到表单验证,验证用户名和密码,

var checkUsername = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("用户名不能为空"));
  }
};
var checkPWD = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("密码不能为空"));
  }
};
return {
  ruleForm: {
    username: "",
    password: ""
  },
  rules: {
    username: [{ required: true, trigger: "blur", validator: checkUsername }],
    password: [{ required: true, trigger: "blur", validator: checkPWD }]
  },
  labelPosition: "left"
};

但是点击登陆时他一直不走valid里面的代码

this.$refs[formName].validate((valid) => {
  if (valid) {
    console.log("456")
    // 通过验证格式验证
    
    // 登陆接口验证成功
    this.$message({
      type: "success", // type有success,error,info,warning
      message: "登录成功!"
    });
    //存储用户信息并刷新页面
    localStorage.userId = 1;
    this.$router.replace({ path: "/payDefaultIndex" });

  } else {
    console.log("error submit!!");
    return false;
  }
});

,后来又试了几次,发现输入错误的时候没问题,输入正确他就不往下走了,后来发现是自定义验证方法那里写错了,无论验证成功或失败,都必须要返回一个callback()

// 自定义校验 callback 必须被调用。  // 这是官方文档的一句话

var checkUsername = (rule, value, callback) => {
 if (!value) {
    return callback(new Error("用户名不能为空"));
  }else{
    callback()
  }
};
var checkPWD = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("密码不能为空"));
  }else{
    callback()
  }
};

这样就好了,问题虽小,记录一下,加深印象吧