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 相关文章推荐
js 函数调用模式小结
Dec 26 Javascript
禁用页面部分JavaScript不是全部而是部分
Sep 03 Javascript
微信小程序 教程之WXSS
Oct 18 Javascript
jQuery Validate让普通按钮触发表单验证的方法
Dec 15 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
element-ui upload组件多文件上传的示例代码
Oct 17 Javascript
微信小程序实现保存图片到相册功能
Nov 30 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
移动端手指操控左右滑动的菜单
Sep 08 Javascript
JS实现简单的表格增删
Jan 16 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 Javascript
javascript函数式编程基础
Sep 15 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数组交集的优化代码分析
2011/03/06 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
php的socket编程详解
2016/11/20 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
一个简单的jQuery计算器实现了连续计算功能
2014/07/21 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
layui文件上传实现代码
2017/05/20 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
2017/10/19 Javascript
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
移动端图片上传旋转、压缩问题的方法
2018/10/16 Javascript
JS数据类型判断的几种常用方法
2020/07/07 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
Python连接mysql数据库的正确姿势
2016/02/03 Python
python实现K最近邻算法
2018/01/29 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
python numpy数组中的复制知识解析
2020/02/03 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
数组越界问题
2015/10/21 面试题
小学教师节活动方案
2014/01/31 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
Pyhton模块和包相关知识总结
2021/05/12 Python
AJAX学习笔记
2021/05/18 Javascript
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫