vue.javascript 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中代码不执行问题解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

到此这篇关于vue.javascript element-ui validate中代码不执行问题如何解决方法就介绍到这了。人生不售来回票,一旦动身,绝不能复返。更多相关vue.javascript element-ui validate中代码不执行问题如何解决方法内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

您可能有感兴趣的文章
Vue路由参数的传递与获取方式详细介绍

vue学习记录之动态组件浅析

如何解决ElementUI组件中el-upload上传图片不显示问题

解读element el-upload上传的附件名称不显示 file-list赋值

一篇关于el-table-column的formatter的如何使用及说明