当前位置: 首页 > 编程笔记 >

vue.js element-ui validate中代码不执行问题解决方法

萧奇
2023-03-14
本文向大家介绍vue.js element-ui validate中代码不执行问题解决方法,包括了vue.js element-ui validate中代码不执行问题解决方法的使用技巧和注意事项,需要的朋友参考一下

先说结论

在自定义验证里面每一个判断都要有callback(),就是要保证callback()一定会执行到

因为要验证数字,参考了官网参考代码如下,发现有如下图bug,当输入为以数字开头包含字符串的内容时,验证不会报错,因为业务逻辑也不相符,随改写代码

<el-form-item label="年龄" prop="age">
  <el-input v-model.number="ruleForm2.age"></el-input>
 </el-form-item>
var checkAge = (rule, value, callback) => {
    if (!value) {
     return callback(new Error('年龄不能为空'));
    }
    setTimeout(() => {
     if (!Number.isInteger(value)) {
      callback(new Error('请输入数字值'));
     } else {
      if (value < 18) {
       callback(new Error('必须年满18岁'));
      } else {
       callback();
      }
     }
    }, 1000);
   };

image.png

let checkNumber = (rule, value, callback) => {
 if (!value) {
  return callback(new Error('预存款不能为空'));
 }
 setTimeout(() => {
  if (!Number.isInteger(Number(value))) {
   callback(new Error('请输入数字值'));
  } 
  /*
  else {
     callback()
    }
  */
 }, 100);
};

因为最开始直接删掉了else中所有内容,在执行 this.$refs[formName].validate((valid) => {}) 时候,内部代码一直不会执行,最后发现在自定义验证里面每一个判断都要有callback(),就是要保证callback()一定会执行到。

总结

以上所述是小编给大家介绍的vue.js element-ui validate中代码不执行问题解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!

 类似资料:
  • 本文向大家介绍jQuery Ajax Post 回调函数不执行问题的解决方法,包括了jQuery Ajax Post 回调函数不执行问题的解决方法的使用技巧和注意事项,需要的朋友参考一下 今天在写一个检查用户名的功能时,使用的是jQuery.post( url, [data], [callback], [type] )这个函数,但是发现其中的回调函数不能执行。 先来看看我的代码: 前台代码: 后台

  • 本文向大家介绍解决centos7 开机/etc/rc.local 不执行的问题,包括了解决centos7 开机/etc/rc.local 不执行的问题的使用技巧和注意事项,需要的朋友参考一下 最近发现centos7 的/etc/rc.local不会开机执行,于是认真看了下/etc/rc.local文件内容的就发现了问题的原因了  翻译: 于是我有确认了下/etc/rc.local的权限 /etc/

  • 下了个若依的代码,运行没有问题,但idea中红色的提示却让人很不爽。 清除 idea 缓存后,还是这样。 请问还可能是什么原因?如何解决? 代码应该是没问题的。

  • 本文向大家介绍Python一行代码解决矩阵旋转的问题,包括了Python一行代码解决矩阵旋转的问题的使用技巧和注意事项,需要的朋友参考一下 今天刷《剑指offer》的时候碰到这样一道题: 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下4 X 4矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依次打印出数字1,2,3,4,8,

  • 本文向大家介绍6行代码快速解决golang TCP粘包问题,包括了6行代码快速解决golang TCP粘包问题的使用技巧和注意事项,需要的朋友参考一下 前言 什么是TCP粘包问题以及为什么会产生TCP粘包,本文不加讨论。本文使用golang的bufio.Scanner来实现自定义协议解包。 下面话不多说了,来一起看看详细的介绍吧。 协议数据包定义 本文模拟一个日志服务器,该服务器接收客户端传到的数

  • 本文向大家介绍Navicat for MySQL 乱码问题解决方法,包括了Navicat for MySQL 乱码问题解决方法的使用技巧和注意事项,需要的朋友参考一下 Navcat for MySQL这个软件有多好用就不用我废话了,软件本身使用UTF8编码,我MySQL服务器和数据也都是UTF8编码,但是在列表里非ASCII字符就乱码,经过一番查找问题出在连接选项上,这里可以选择“使用MySQL字