解决ElementUI 自定义验证 validate 函数不执行的问题

2023-11-04

<span slot="footer">
    <el-button v-on:click="visible = false">取消</el-button>
    <el-button v-on:click="onSubmit('ruleForm')" style="background-color: #000;color: #fff;">提交</el-button>
</span>
onSubmit(formName) {
    this.$refs[formName].validate((valid) => {
        console.log('进来了')

        ...其它逻辑
    })
}
rules: {
    SMSChannel: [
        { required: true, message: '请选择', trigger: 'change' }
    ],
    Mobile: [
        { required: true, message: '请输入手机号码', trigger: 'blur' },
        { validator: validatorMobile, message: '请输入正确的手机号码'}
    ],
    email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { pattern: emailReg, message: '请输入正确的邮箱' }
    ],
    code: [
        { required: true, message: '请输入验证码' }
    ],
    name: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
        { min: 2, max: 20, message: '长度在2-20个字符', trigger: 'blur' },
        // { type: 'string',message:'格式不正确',trigger: 'blur', required: true, pattern: /^[\u2E80-\u9FFF\.A-Za-z]{1,}\s*[\u2E80-\u9FFF\.A-Za-z]{1,}$/}
    ],
    Birthday: [
        { required: true, message: '请选择生日' }
    ],
    Gender: [
        { required: true, message: '请选择性别' }
    ],
    location: [
        { required: true, message: '请选择所在地' }
    ],
    address: [
        { required: false, message: '请选择国家/地区' }
    ],
    //shopAddress: [
    //    { required: true, message: '请选择店铺所在地' }
    //],

    channel: [
        { required: false, message: '请选择' }
    ],
    phoneOrEmail: [
        { required: true, message: '请输入联系电话', trigger: 'blur' }
    ]
}
let validatorMobile = (rule, value, callback) => {
    const reg = mobileReg
    if (!reg.test(this.ruleForm.Mobile)) {
        //this.$message({
        //    showClose: true,
        //    message: '请先填写正确的手机号码',
        //    type: 'warning'
        //});
        return callback("请先填写正确的手机号码");
    }
    return callback();
}

如图,调试的时候,我在validate内部打印了一句话,打开调试工具,发现怎么也不执行。调试了半天,终于发现了问题,同事在进行手机号自定义校验的时候没有进行callback回调。callback函数没有执行,validate函数就不会执行,之后我加了callback代码逻辑后,validate函数就正常执行了。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

解决ElementUI 自定义验证 validate 函数不执行的问题 的相关文章

随机推荐

  • [备忘]域用户登陆出现“此工作站和主域间的信任关系失败”错误解决方法

    症状 登陆域用户 出现错误 此工作站和主域间的信任关系失败 并无法登陆 解决方案 1 使用本地用户登录 更改当前 域 为 工作组 如默认的WORKGROUP等 并输入具有域管理权限的用户名 密码 随后此电脑上的 域 将会被删除 2 重启电脑
  • Flink入门看完这篇文章就够了

    文章目录 第一章 概述 第一节 什么是Flink 第二节 Flink特点 第三节 Flink应用场景 第四节 Flink核心组成 第五节 Flink处理模型 流处理和批处理 第六节 流处理引擎的技术选型 拓展 什么是最多一次 最少一次和仅一
  • 算法基础之数组理论

    算法基础之数组理论 1 前言 2 数组基础定义 3 数组增删改查 3 1基本功能 3 2添加元素 3 3查询和修改元素 3 4包含 搜索和删除元素 3 5其他 3 6检验 4 动态数组及其时间复杂度 4 1动态数组的实现 4 2增删改查时间
  • 阿里云通义千问向全社会开放,近期将开源更大参数规模大模型

    9月13日 阿里云宣布通义千问大模型已首批通过备案 并正式向公众开放 广大用户可登录通义千问官网体验 企业用户可以通过阿里云调用通义千问API 通义千问在技术创新和行业应用上均位居大模型行业前列 IDC最新的AI大模型评估报告显示 通义千问
  • 【YModem】YModem串口IAP升级例程+YModem串口工具

    目录 YModem协议传输的过程 IAP例程 YModem串口工具 YModem技术手册 手把手教你如何实现自动固件更新 YModem协议是由XModem协议演变而来的 每包数据可以达到1024字节 是一个非常高效的文件传输协议 Ymode
  • ChatGPT多场景应用之基本应用

    人工智能 AI 无疑是近年来最流行和最先进的技术之一 生成式 AI模型正在促进众多任务 实现效率和自动化 目前 ChatGPT是风靡互联网的主要生成人工智能模型 据 Similar Web 称 自 2022 年 11 月发布以来 其访问量已
  • 【c语言五子棋】自定义类型五子棋/井字棋:胜负判断

    一 算法思路 由于五子棋规则比较简单 我们可以胜负判断分为以下几个方面分别判断 1 横向判断 2 竖向判断 3 斜向判断 从左下到右上 4 斜向判断 从左上到右下 二 算法原理 算法来源 参考字符串匹配的处理方法 具体可以参考 从头到尾彻底
  • 腾讯COS,Cloudbase API用法教程详细

    Chinar blog www chinar xin 腾讯云 COS Cloudbase API 本文提供全流程 中文翻译 Chinar 的初衷是将一种简单的生活方式带给世人 使有限时间 具备无限可能 Chinar 心分享 心创新 助力快速
  • 使用GCC和Makefile编译c文件

    Ubuntu下使用GCC和Makefile编译c文件 目录 Ubuntu下使用GCC和Makefile编译c文件 前言 一 GGC命令行模式 1 vim创建文件 2 gcc编译 1 编译出目标文件 2 链接为可执行文件 3 运行 二 VS2
  • 没有苹果开发者账号能否创建ios证书-最新

    在2020年以前 注册苹果开发者账号后 就可以使用香蕉云编生成证书 但2020年后 因为注册苹果开发者账号需要使用Apple Developer app注册开发者账号 所以需要缴费才能创建ios证书了 所以新政策出来后 只能使用香蕉云编 注
  • quill富文本编辑器 自定义字体和大小 以及提交和回显

    第一步 引入quill样式 我是下载到本地了 第二步 引入js
  • 网购平台用户行为分析

    1 背景 对于电子商务网站来说 每天都会产生海量的关于用户的行为数据 分析用户的行为对于企业来说至关重要 从海量用户行为数据中可以挖掘出网购用户的个人喜好 行为特征 购买倾向等隐藏信息 从而为电子商务服务商提供有价值的信息 本文基于SQL从
  • kex_exchange_identification: Connection closed by remote host问题解决

    今天动了一下代码 打算提交到github 结果使用git push 的时候报错 kex exchange identification Connection closed by remote host 在网上找了半天各种方法都试过了 终于找
  • 个人学习日记—CSS字体样式属性调试工具

    font字体 font size 大小 作用 font size属性用于设置字号 p font size 20px 单位 可以使用相对长度单位 也可以使用绝对长度单位 相对长度单位比较常用 推荐使用像素单位px 绝对长度单位使用较少 注意
  • Spring系列之依赖注入---手动注入

    本文内容 主要介绍xml中依赖注入的配置 构造器注入的3种方式详解 set方法注入详解 注入容器中的其他bean的2种方式 其他常见类型注入详解 依赖回顾 通常情况下 系统中类和类之间是有依赖关系的 如果一个类对外提供的功能需要通过调用其他
  • CocosCreator3.8研究笔记(二)windows环境 VS Code 编辑器的配置

    一 设置文件显示和搜索过滤步骤 为了提高搜索效率以及文件列表中隐藏不需要显示的文件 VS Code 需要设置排除目录用于过滤 比如 cocoscreator 中 编辑器运行时会自动生成一些目录 build temp library 所以应该
  • python数据分析处理库-Pandas

    1 读取数据 import pandas food info pandas read csv food info csv print type food info
  • 架构设计核心理念

    文章目录 一 架构设计核心原则 二 架构设计的复杂性 2 1 高性能 2 2 高可用 2 3 可扩展 2 4 低成本 2 5 安全 2 6 规模 一 架构设计核心原则 架构设计的主要目的是为了解决软件系统复杂度带来的问题 架构设计三原则 合
  • Gitolite 构建 Git 服务器

    http www ossxp com doc git gitolite html Gitolite 构建 Git 服务器 Gitolite 构建 Git 服务器 作者 北京群英汇信息技术有限公司 网址 http www ossxp com
  • 解决ElementUI 自定义验证 validate 函数不执行的问题

    span span