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

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

错误示范

复制代码
// template
<el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="名字" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">验证</el-button>
      </el-form-item>
    </el-form>

//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

相关推荐
车口4 小时前
滚动加载更多内容的通用解决方案
javascript
艾小码4 小时前
手把手教你实现一个EventEmitter,彻底告别复杂事件管理!
前端·javascript·node.js
因吹斯汀5 小时前
一饭封神:当AI厨神遇上你的冰箱,八大菜系大师在线battle!
前端·vue.js·ai编程
崔璨6 小时前
详解Vue3的响应式系统
前端·vue.js
摸鱼的鱼lv6 小时前
🔥 Vue.js组件通信全攻略:从父子传值到全局状态管理,一篇搞定所有场景!🚀
前端·vue.js
lichong9516 小时前
【混合开发】vue+Android、iPhone、鸿蒙、win、macOS、Linux之dist打包发布在Android工程asserts里
android·vue.js·iphone
Jedi Hongbin7 小时前
Three.js shader内置矩阵注入
前端·javascript·three.js
超人不会飛7 小时前
vue3 markdown组件|大模型应用专用
前端·vue.js·人工智能
VillenK7 小时前
用插件的方式注入Vue组件
前端·vue.js
掘金安东尼7 小时前
Node.js 如何在 2025 年挤压 I/O 性能
前端·javascript·github