您现在的位置是:网站首页> 编程资料编程资料
el-form错误提示信息手动添加和取消的示例代码_vue.js_
2023-05-24
605人已围观
简介 el-form错误提示信息手动添加和取消的示例代码_vue.js_
需求
对表单填写字段进行标记有误和取消标记有误
方案
最新想到的方案 推荐
定义一个存放错误信息的对象,然后再自定义一个验证规则,在这个验证规则中,通过当前验证字段的prop值,到存放错误信息的对象中获取对应的错误提示文案,如果获取到了,则说明,该字段存在标记有误,则让验证不通过,反之,则让验证通过
运行效果:

实现代码
标记有误/取消标记有误:
onMarkError(['markField', 'mustAndMarkField'])"> 将第二个和最后一个标记有误 onMarkError(['markField'])" >将第二个标记有误 onMarkError(['mustAndMarkField'])" >将最后一个标记有误 onCancelMarkError(['markField', 'mustAndMarkField'])" > 取消第二个和最后一个标记有误 onCancelMarkError(['markField'])"> 取消第二个标记有误 onCancelMarkError(['mustAndMarkField'])"> 取消最后一个标记有误 提交表单 onChangeModel('hasValuePassMarkError')" >只要有值则标记有误验证通过 onChangeModel('ignoreMarkError')"> 不执行标记有误验证
到此这篇关于el-form错误提示信息手动添加和取消的文章就介绍到这了,更多相关el-form错误提示信息内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
您可能感兴趣的文章:
相关内容
- 利用JavaScript实现防抖节流函数的示例代码_javascript技巧_
- 使用 JS 复制页面内容的三种方案_JavaScript_
- vue3中h函数的常用使用方式汇总_vue.js_
- npm报错:npm WARN config global '--global', '--local' are deprecated解决_node.js_
- Vue生命周期深入分析总结_vue.js_
- Vue环境搭建报错整理大全_vue.js_
- element tree懒加载:load="loadNode"只触发一次的解决方案_vue.js_
- vue前端框架vueuse的useScroll函数使用源码分析_vue.js_
- Vue全局事件总线和订阅与发布使用案例分析讲解_vue.js_
- el-table渲染慢卡顿问题最优解决方案_vue.js_
