解决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 函数不执行的问题 的相关文章

  • 如何在同一页面上使用AJAX处理多个表单

    我有一个表单 当我单击 提交 时 它就被提交了 然后该表单隐藏 操作页面的结果显示在 div 中 classname dig 它工作正常 但是当我添加另一个表单时 它停止正常工作并且所有表单同时提交 我如何更改我的代码 done click
  • 每 3 秒重复一次动画

    我正在使用 WOW js 和 animate css 现在我正在将 CSS 运行到 Infinite 我想知道如何让我的课程运行 3 秒停止并再次开始到无限 My html img src images fork png class for
  • 为什么 JavaScript base-36 转换看起来不明确

    我目前正在编写一段使用 Base 36 编码的 JavaScript 我遇到了这个问题 parseInt welcomeback 36 toString 36 看来要回归了 welcomebacg 我在 Chrome 开发者控制台和 Nod
  • jquery.find() 可以只选择直接子项吗?

    我应该向 jQuery find 提供什么参数来选择元素子元素而不选择其他元素 我不能用 gt 引导选择器 而用 将选择所有后代 而不仅仅是直接子代 我知道 jQuery children 但这是一个库 因此用户能够提供自己的选择器 并且我
  • TypeError: props.render 不是一个函数(React hook 形式)

    我将方法作为我用react hook form制作的形式的道具传递 当从react hook form添加控制器时 它给了我 TypeError props render不是一个函数 我在网上找不到任何解决方案 因此感谢任何帮助 impor
  • 使用 useReducers 调度函数发送多个操作?

    使用时是否可以通过调度函数发送多个动作useReducer挂钩反应 我尝试向它传递一组操作 但这会引发未处理的运行时异常 明确地说 通常会有一个初始状态对象和一个减速器 如下所示 const initialState message1 nu
  • 我想检查 $('#td1').text() === "x" 是否?

    我想检查innerHtml是否有X或O 所以我不能再次添加任何其他东西 但它不起作用 添加检查代码后它就停止了 我在这里尝试做一个简单的XO游戏来更熟悉javascript和jquery 我也不确定是否可以用 jQuery 做到这一点
  • 可以使用 jQuery 或 Javascript 将图片的特定部分用作链接吗?

    我有这个想法 将图片 而不是文本 的各个部分链接到不同的页面或网站 并且我想在不实际创建不同的照片并将它们彼此靠近的情况下完成 这样看起来就像是一张完整的图片 这里有人知道如何使用 JavaScript 的变体 例如 jQuery 或纯 J
  • 除了更改标题之外,如何在 Firefox 中强制另存为对话框?

    有没有办法在 ff 中强制打开 www example com example pdf 的另存为对话框 我无法更改标题 如果您可以将文件以 Base64 格式输出到客户端 则可以使用 data uri 进行下载 location href
  • Meteor - 从客户端取消服务器方法

    我正在通过服务器方法执行数据库计数 用户可以选择他们希望如何执行计数 然后调用该方法 我的问题是 计数可能需要一些时间 并且用户可能会在方法运行时改变主意并请求不同的计数 有什么方法可以取消调用的方法并运行新的计数吗 我认为 this un
  • 跟踪用户何时点击浏览器上的后退按钮

    是否可以检测用户何时单击浏览器的后退按钮 我有一个 Ajax 应用程序 如果我可以检测到用户何时单击后退按钮 我可以显示适当的数据 任何使用 PHP JavaScript 的解决方案都是优选的 任何语言的解决方案都可以 只需要我可以翻译成
  • 在javascript中解析json - 长数字被四舍五入

    我需要解析一个包含长数字的 json 在 java servlet 中生成 问题是长数字被四舍五入 当执行这段代码时 var s x 6855337641038665531 var obj JSON parse s alert obj x
  • 在 webpack 2.x 中使用 autoprefixer 和 postcss

    如何使用autoprefixer使用 webpack 2 x 以前 它曾经是这样的 module loaders test scss loader style css sass postcss postcss gt return autop
  • 如何在react-native中获取Text组件的onPress值

    我是一名新的 React Native 开发人员 我想使用 onPress 获取 Text 组件的值并将其传递给函数
  • Firefox 书签探索未超过 Javascript 的第一级

    我已经编写了一些代码来探索我的 Firefox 书签 但我只获得了第一级书签 即我没有获得文件夹中的链接 e g 搜索引擎 雅虎网站 谷歌网站 在此示例中 我只能访问 Search engines 和 google com 不能访问 yah
  • Angular 2+ 安全性;保护服务器上的延迟加载模块

    我有一个 Angular 2 应用程序 用户可以在其中输入个人数据 该数据在应用程序的另一部分进行分析 该部分仅适用于具有特定权限的人员 问题是我们不想让未经授权的人知道how我们正在分析这些数据 因此 如果他们能够在应用程序中查看模板 那
  • Javascript 数组到 VBScript

    我有一个使用 Javascript 构建的对象数组 我需要使用 VBScript 读取它 如下例所示 我找不到在 VbScript 代码中循环遍历数组的方法myArray object 这个例子是我的问题的简化 我无法更改页面的默认语言 这
  • 为什么在 Internet Explorer 中访问 localStorage 对象会引发错误?

    我正在解决一个客户端问题 Modernizr 意外地没有检测到对localStorageInternet Explorer 9 中的对象 我的页面正确使用 HTML 5 文档类型 并且开发人员工具报告该页面具有 IE9 的浏览器模式和 IE
  • 将 MQTTNet 服务器与 MQTT.js 客户端结合使用

    我已经启动了一个 MQTT 服务器 就像this https github com chkr1011 MQTTnet tree master例子 该代码托管在 ASP Net Core 2 0 应用程序中 但我尝试过控制台应用程序 但没有成
  • 在 React.js 中编辑丰富的数据结构

    我正在尝试为数据结构创建一个简单的基于网格的编辑器 但我在使用 React js 时遇到了一些概念问题 他们的文档对此没有太大帮助 所以我希望这里有人可以提供帮助 首先 将状态从外部组件传输到内部组件的正确方法是什么 是否有可能将内部组件中

随机推荐

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

    症状 登陆域用户 出现错误 此工作站和主域间的信任关系失败 并无法登陆 解决方案 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