vue element ui validate 主动触发错误提示操作


Posted in Javascript onSeptember 21, 2020

elementUI使用了async-validator进行表单验证,但是当我使用下拉树(el-cascader)时,发现其不主动触发,于是我只能主动去触发,方法如下:

this.$refs['form'].fields[0].validateMessage = 'error message'

this.$refs['form'].fields[0].validateState = 'error'

补充知识:element-ui 打开页面触发校验问题

如果你设置了关闭弹出页就resetFields(),此时打开页面仍然触发校验效果,一般是下拉框和时间选择导致的,解决办法就是更改校验规则rules,

endTime: [{ type: 'string', required: true, message: '请选择', trigger: 'blur' }],

type: [{ type: 'number', required: true, message: '请选择', trigger: 'blur' }],

此时,你的下拉选择类型要正确,就像我,此时下拉框的value是number,那么这里就是number,假如你的下拉框对应的value是string,类型相应改变。

与此同时,element-ui有个坑,时区问题,导致传向后台的时间和选择的时间相差八个小时,此时你需要设置

value-format="yyyy-MM-dd HH:mm:ss"

这样,传向后台是一个字符串,校验时,就需要按照endTime的规则了

以上这篇vue element ui validate 主动触发错误提示操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
可缩放Reloaded-一个针对可缩放元素的复用组件
Mar 10 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
Jul 25 Javascript
创建公共调用 jQuery Ajax 带返回值
Aug 01 Javascript
JQuery中使用ajax传输超大数据的解决方法
Jul 14 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 Javascript
纯原生js实现贪吃蛇游戏
Apr 16 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 Javascript
swiper4实现移动端导航切换
Oct 16 Javascript
vue实现单一筛选、删除筛选条件
Oct 26 Javascript
Vue Element校验validate的实例
Sep 21 #Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 21 #Javascript
vue3.0 上手体验
Sep 21 #Javascript
微信小程序实现点击页面出现文字
Sep 21 #Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
Sep 21 #Javascript
理解JavaScript中的Proxy 与 Reflection API
Sep 21 #Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
Sep 21 #Javascript
You might like
php Calender(日历)代码分享
2014/01/03 PHP
php验证是否是md5编码的简单代码
2014/04/01 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
easyui tree带checkbox实现单选的简单实例
2016/11/07 Javascript
NodeJS中的MongoDB快速入门详细教程
2016/11/11 NodeJs
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
JavaScript cookie原理及使用实例
2020/05/08 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
JS实现4位随机验证码
2020/10/19 Javascript
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
[00:33]2016完美“圣”典风云人物:Sccc宣传片
2016/12/03 DOTA
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
详解Python的Django框架中的templates设置
2015/05/11 Python
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
神经网络(BP)算法Python实现及应用
2018/04/16 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
html+css3实现的登录界面
2020/12/09 HTML / CSS
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
农民入党思想汇报
2014/01/03 职场文书
表决心的诗句大全
2014/03/11 职场文书
文明寝室标语
2014/06/13 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
学校2015年纠风工作总结
2015/05/15 职场文书
撤诉申请怎么写
2015/05/19 职场文书
革命电影观后感
2015/06/18 职场文书
中秋节随笔
2015/08/15 职场文书
Django使用redis配置缓存的方法
2021/06/01 Redis