element ui 中表单验证validate验证成功不执行成功的逻辑代码

首先今天做项目时遇到的一个问题,下面代码中,如果上面的验证规则通过但是不会执行验证通过的代码,只有验证不通过才会输出else里的代码

this.$refs[formName].validate((valid) => {//valid为true时代表所有验证规则通过if (valid) {//验证通过执行的代码,不执行} else {console.log('error submit!!')return false}})

经过自己去官网查看发现是自己写验证的时候疏忽了,下面是自己错误的代码,可以看到如果验证失败,都会调用callback()方法 ,也是这个方法是触发validate()方法,所以验证不通过会触发validate()方法去执行不通过的逻辑,但是如果都通过了却什么都没执行。

var checkPrice = (rule, value, callback) => {if (!value) {return callback(new Error('不能为空'))}if (!Number.isInteger(value)) {callback(new Error('请输入数字值'))}}

所以要在声明的验证规则中加入validate(),如果都通过了也触发validate()方法执行执行验证通过的代码,

var checkPrice = (rule, value, callback) => {if (!value) {return callback(new Error('不能为空'))}if (!Number.isInteger(value)) {callback(new Error('请输入数字值'))}validate()}

为什么element ui 中表单验证validate验证成功不执行验证成功的逻辑代码相关推荐

  1. Vue 篇 解决ELement UI 中表单验证(多层Object嵌套)

    项目场景: 提示:主要是在 Vue 框架中: 用 Element UI 提供的规则进行表单验证 问题描述 因为我 data 里面嵌套了多层 Object, 所以 Element UI 提供的表单验证没 ...

  2. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

      方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...

  3. element UI 表单自定义验证,css水平且垂直居中方法

    element UI 表单自定义验证 element UI提供了一种内部的表单验证,但是这种方法不能够来进行复杂的验证,如邮箱,手机号等的验证需要用到自定义验证 首先是element UI 提供的基础 ...

  4. vue+element ui表单校验(邮箱、电话、工商信息)

    vue+element ui表单校验(邮箱.电话.工商信息)) Html部分 <template><div><el-steps :active="active& ...

  5. vue 3.0记录Element UI 表单使用(看了隔壁小孩儿都会用的Element UI 表单组件使用)

    Element UI 表单 使用 记录 element ui 表单 input 文本域 日期选择 中国标准时间与xxxx-xx-xx格式时间之间的来回切换 中国标准时间转换为xxxx-xx-xx格式 ...

  6. form generator ——Element UI表单设计及代码生成器

    form generator Element UI表单设计及代码生成器,可将生成的代码直接运行在基于Element的vue项目中. 网站地址:https://mrhj.gitee.io/form-ge ...

  7. element ui 表单验证为正整数

    很多时候都会用表单中输入正整数的情况,在element ui中可以用el-input-number 标签来显示输入框是number类型的,或者type="number"也可以的,但 ...

  8. element ui表单验证

    这里通过一个实例来说明表单验证: 如上图所示,我们点击"添加新用户"弹出弹框 这里只讲弹框里面的校验代码: <template><div id="cre ...

  9. Element UI 表单在el-form-item中使用自定义验证规则

    1:官网示例 <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleFo ...

最新文章

  1. 网站压力测试工具webbench
  2. 【Rsync + inotify】 实时同步远程服务器目录文件
  3. pcb 理论阻值、 过孔_超实用!PCB设计中过孔常用的6种处理方式
  4. 谷歌浏览器怎么设置字体 chrome默认字体设置方法
  5. vim的简单使用及配置
  6. Azure PaaS服务密钥的安全性
  7. 推荐 7 个优质技术号
  8. C#实现最简单的文本加密方法
  9. JAVA 获取零时区时间
  10. 企业级反向代理 Haproxy
  11. 阿里系产品Xposed Hook检测机制原理分析
  12. Hibit Uninstall 批量的软件卸载,强制卸载
  13. 排列组合 C(n,m)
  14. 潘正磊谈微软研发团队管理和Visual Studio开发过程中的敏捷实践
  15. 国内oschina Maven公共仓库
  16. FPGA驱动OLED Verilog代码 (五)------ 动态显示字符
  17. 使用USBWriter做U盘启动盘后U盘在盘中不显示的解决办法
  18. 11张图读模电、数电必备的电路基础知识
  19. 简单的合成图片实现‘盖章’
  20. 数据库关系代数运算之连接

热门文章

  1. Java引入第三方包
  2. 2020 ACM杰出科学家名单出炉:叶杰平、崔鹏等26位华人学者上榜
  3. mysql 设置 sql_mode
  4. json.stringify()详解
  5. python循环输出1到10_用Python编写一个程序,使用for循环输出0~10之间的整数
  6. ADXL345知识学习总结
  7. Object的notify和notifyAll方法的区别
  8. checkboxlist控件用法
  9. 春季瘦身燃烧脂肪14种妙法
  10. 记一次too many open files 异常