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
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()一定会执行到。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 119,336评论 16 133
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 155,869评论 24 680
  • 转至元数据结尾创建: 董潇伟,最新修改于: 十二月 23, 2016 转至元数据起始第一章:isa和Class一....
    萌萌的小伟哥阅读 944评论 0 9
  • 下载安装搭建环境 可以选npm安装,或者简单下载一个开发版的vue.js文件 浏览器打开加载有vue的文档时,控制...
    冥冥2017阅读 4,730评论 0 42
  • 阳春三月,学校组织了让我们盼望已久的春游活动,这次我们去的地方是中国科学院云南天文台,它位于昆明东郊凤凰山上。天文...
    晨子超爱喝奶茶阅读 166评论 1 1