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 相关文章推荐
Some tips of wmi scripting in jscript (1)
Apr 03 Javascript
基于datagrid框架的查询
Apr 08 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
BootStrap 附加导航组件
Jul 22 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
Jun 04 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
Jun 02 Javascript
vue实现点击关注后及时更新列表功能
Jun 26 Javascript
使用Angular-CLI构建NPM包的方法
Sep 07 Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 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
超级实用的7个PHP代码片段分享
2012/01/05 PHP
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
PHP使用DirectoryIterator显示下拉文件列表的方法
2015/03/13 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
php打包网站并在线压缩为zip
2016/02/13 PHP
详解php魔术方法(Magic methods)的使用方法
2016/02/14 PHP
浅谈php中curl、fsockopen的应用
2016/12/10 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
this在vue和小程序中的使用详解
2019/01/28 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
Javascript作用域和作用域链原理解析
2020/03/03 Javascript
Python写的英文字符大小写转换代码示例
2015/03/06 Python
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
Python切片索引用法示例
2018/05/15 Python
Flask之flask-session的具体使用
2018/07/26 Python
使用Python实现毫秒级抢单功能
2019/06/06 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
浅谈JupyterNotebook导出pdf解决中文的问题
2020/04/22 Python
django ORM之values和annotate使用详解
2020/05/19 Python
python中的django是做什么的
2020/07/31 Python
pandas针对excel处理的实现
2021/01/15 Python
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
护士辞职信模板
2014/01/20 职场文书
公司委托书怎么写
2014/08/02 职场文书
工程安全生产协议书
2014/11/21 职场文书
单位考核聘任报告
2015/03/02 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书
总结一些Java常用的加密算法
2021/06/11 Java/Android
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题