Vue ElementUI之Form表单验证遇到的问题


Posted in Javascript onAugust 21, 2017

首先说一下 我在form表单里面遇见的坑:

1.例如我要给后台传的不是对象,而是一个数组,怎么写验证?

2.比如我有四个弹出框,都要做验证,这个时候就要注意了,每一个弹出框的ref都不能给的一样,并且一定要与当前弹框的确定或者保存按钮一一对应,例如:第一个弹框的ref='number',按钮的click比如为xxxxxx('number'),第二个弹出框的ref=‘number2',对应的按钮>>xxxxxx('number2')。如果ref用的都一样,就会出现,点击下一步我没有去做验证,我再点击上一步,再点击下一步,控制台就会报错!

官网给的列子是在<el-form>里面进行验证,(当然也可以不用再标签里面进行验证,这里我重要说在标签里!!!),标签上要绑定一个对象(例,:model='numberValidateForm'),注意:model绑定的必须是一个对象,如果是一个数组怎么办呢?这个下面再说,ref="numberValidateForm" 是什么呢,我要对表单进行验证,当然少不了确定或者保存按钮,名字需要和按钮一一对应,这样才能实现 点击保存的时候去验证输入框,上图!

Vue ElementUI之Form表单验证遇到的问题

好,接下来就要我们解决上面说的数组的问题了,如果我要传给后台的是一个数组,不是对象,我要怎么去做验证呢?直接上代码。

let flag = true;
    if (this.$refs[formName] instanceof Array && this.$refs[formName].length > 0) {
     this.$refs[formName].forEach((obj, index) => {
      obj.validate((valid) => {
       if (valid) {
        console.log('验证成功!');
       } else {
        console.log('error submit!!');
        flag = false;
        return false;
       }
      });
     });
     if (flag) {
      this.secondDialog = false;
      this.thirdDialog = true;
     }
    }

当然,你要是觉得麻烦,也可以用JQ的方法去做验证,这样简单一点:(判断输入框paramName 是否为空,如果为空,显示错误提示信息,否则不显示)

let flag = true;
 this.requestParamsList.map((data, index) => {
     if (data.paramName == "") {
      $(".jqueryValidate").eq(index).show();
      flag = false;
     }
   });

Vue ElementUI之Form表单验证遇到的问题

Vue ElementUI之Form表单验证遇到的问题

最终效果图如下:

Vue ElementUI之Form表单验证遇到的问题

总结

以上所述是小编给大家介绍的Vue ElementUI之Form表单验证遇到的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
不一样的文字闪烁 轮番闪烁
Nov 11 Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
jquery插件qrcode在线生成二维码
Apr 26 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
JS实现光滑展开合拢的菜单效果代码
Sep 16 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
vue如何将v-for中的表格导出来
May 07 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
JS中验证整数和小数的正则表达式
Oct 08 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
bootstrap table列和表头对不齐的解决方法
Jul 19 Javascript
js中调用微信的扫描二维码功能的实现代码
Apr 11 Javascript
JavaScript中各数制转换全面总结
Aug 21 #Javascript
JQuery判断正整数整理小结
Aug 21 #jQuery
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 #Javascript
Vue.js实现按钮的动态绑定效果及实现代码
Aug 21 #Javascript
Node.js简单入门前传
Aug 21 #Javascript
详解基于webpack2.x的vue2.x的多页面站点
Aug 21 #Javascript
Vue中的ref作用详解(实现DOM的联动操作)
Aug 21 #Javascript
You might like
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
消息持续发送的完整例子
2006/10/09 PHP
PHP 网页过期时间的控制代码
2009/06/29 PHP
php park、unpark、ord 函数使用方法(二进制流接口应用实例)
2010/10/19 PHP
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
php使用SAE原生Mail类实现各种类型邮件发送的方法
2016/10/10 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
2006/10/17 Javascript
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
jQuery预加载图片常用方法
2015/06/15 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
js实现车辆管理系统
2020/08/26 Javascript
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
Python二分法搜索算法实例分析
2015/05/11 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
学生请假条格式
2014/04/11 职场文书
倡导文明标语
2014/06/16 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
终止劳动合同协议书
2014/10/05 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS
Java中API的使用方法详情
2022/04/06 Java/Android
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏