el-form自定义规则后表单验证validate不生效的问题

1.首先放出结论，自定义验证规则必须降所有的可能全部都return callback出去，不然不会走validate

错误示范

// template

      
        
      
      
        验证
      
    

//script
import { reactive, ref } from "vue";
const ruleForm = reactive({
  name: "",
});
const nameChange = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("请填写名字"));
  }
};
const rules = {
  name: [
    {
      validator: nameChange,
      trigger: "blur",
    },
  ],
};
const submitForm = async () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      alert("ok");
    } else {
      alert("no");
    }
  });
};

2.效果如下

3.可以看到含有return callback的未填写情况是触发了ruleFormRef.value.validate，可以获取到valid的问题，但是填写了之后是不会走valid的，

4.将规则修改，使得填写之后的表单验证也有对应的return callback

const nameChange = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("请填写名字"));
  } else {
    return callback();
  }
};

5.这样的条件下就可以验证表单无问题时的valid