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

相关推荐
艾小逗2 小时前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
Hamm5 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
明似水5 小时前
Flutter 弹窗队列管理:支持优先级的线程安全通用弹窗队列系统
javascript·安全·flutter
HhhDreamof_6 小时前
云贝餐饮 最新 V3 独立连锁版 全开源 多端源码 VUE 可二开
前端·vue.js·开源
Simaoya6 小时前
【vue】【element-plus】 el-date-picker使用cell-class-name进行标记,type=year不生效解决方法
前端·javascript·vue.js
Dnn017 小时前
vue3+element-push 实现input框粘贴图片或文本,图片上传。
前端·javascript·vue.js
Nuyoah.7 小时前
《Vue3学习手记5》
前端·javascript·学习
曹牧7 小时前
Java 调用webservice接口输出xml自动转义
java·开发语言·javascript
天天扭码7 小时前
2025年了,npm 与 pnpm我们该如何选择
前端·javascript·npm
烛阴8 小时前
10个JavaScript编程技巧,助你成为高效开发高手!
前端·javascript