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


Posted in Javascript onDecember 18, 2017

先说结论

在自定义验证里面每一个判断都要有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);
   };

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

image.png

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

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

Javascript 相关文章推荐
javascript 常用代码技巧大收集
Feb 25 Javascript
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
Node.js编程中客户端Session的使用详解
Jun 23 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
JavaScript数据类型学习笔记
Jan 25 Javascript
JavaScript 闭包详细介绍
Sep 28 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
Oct 12 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
element中el-container容器与div布局区分详解
May 13 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
Dec 24 Javascript
AngularJs点击状态值改变背景色的实例
Dec 18 #Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 #jQuery
JS实现点击复选框变更DIV显示状态的示例代码
Dec 18 #Javascript
Vue下的国际化处理方法
Dec 18 #Javascript
webpack多页面开发实践
Dec 18 #Javascript
Vue侧滑菜单组件——DrawerLayout
Dec 18 #Javascript
switchery按钮的使用方法
Dec 18 #Javascript
You might like
PHP备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
javascript document.execCommand() 常用解析
2009/12/14 Javascript
JQuery index()方法使用代码
2010/06/02 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
JavaScript实现的XML与JSON互转功能详解
2017/02/16 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
vue中SPA单页面应用程序详解
2017/11/07 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
2017/11/13 jQuery
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
jQuery pagination分页示例详解
2018/10/23 jQuery
vue项目出现页面空白的解决方案
2019/10/31 Javascript
vue开发移动端底部导航条功能
2020/04/08 Javascript
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
python清除字符串里非数字字符的方法
2015/07/02 Python
Python模拟鼠标点击实现方法(将通过实例自动化模拟在360浏览器中自动搜索python)
2017/08/23 Python
python使用邻接矩阵构造图代码示例
2017/11/10 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
国际书籍零售商:Wordery
2017/11/01 全球购物
瑞典多品牌连锁店:Johnells
2021/01/13 全球购物
求职信范文英文版
2014/01/05 职场文书
学生周末回家住宿长期请假条
2014/02/15 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
六五普法学习心得体会
2016/01/21 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书