vue.js element-ui validate中代码不执行问题解决方法
时间:2019-04-11
本文章向大家介绍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中代码不执行问题解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 用于NLP的Python:使用Keras的多标签文本LSTM神经网络分类
- python爬虫进行Web抓取LDA主题语义数据分析报告
- Python使用神经网络进行简单文本分类
- 在Python中自然语言处理生成词云WordCloud
- 使用Python中的ImageAI进行对象检测
- 适用于NLP自然语言处理的Python:使用Facebook FastText库
- R语言ISLR工资数据进行多项式回归和样条回归分析
- Python中用PyTorch机器学习分类预测银行客户流失模型
- R语言犯罪率回归模型报告Regression model on crimerate report
- leetcode树之从根到叶的二进制数之和
- 超冗余机器人运动控制:蛇形机器人 & 8自由度平面机械臂
- Linux Ubuntu / CentOS / MacOS 等系统安装使用 MTR 以及阅读分析 MTR 报告教程
- Helm3部署安装
- Vue核心知识:computed、methods和watch的区别
- 基于keras平台CNN神经网络模型的服装识别分析