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 相关文章推荐
在线编辑器的实现原理(兼容IE和FireFox)
Mar 09 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
Nov 20 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 Javascript
JavaScript数据类型学习笔记
Jan 25 Javascript
谈一谈javascript闭包
Jan 28 Javascript
jQuery插件支持同一页面被多次调用
Feb 14 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
Vue源码解读之Component组件注册的实现
Aug 24 Javascript
taro开发微信小程序的实践
May 21 Javascript
JavaScript闭包相关知识解析
Oct 19 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 Javascript
jQuery实现购物车全功能
Jan 11 jQuery
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
后宫无数却洁身自好的男主,唐三只爱小舞
2020/03/02 国漫
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
PHP实现的激活用户注册验证邮箱功能示例
2017/06/06 PHP
javascript URL锚点取值方法
2009/02/25 Javascript
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
2015/03/03 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
2016/09/13 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
2016/09/29 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
Vue源码探究之状态初始化
2018/11/14 Javascript
p5.js实现动态图形临摹
2019/10/23 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
[17:13]DOTA2 HEROS教学视频教你分分钟做大人-斯拉克
2014/06/13 DOTA
Pyramid添加Middleware的方法实例
2013/11/27 Python
Python 登录网站详解及实例
2017/04/11 Python
使用python读取txt文件的内容,并删除重复的行数方法
2018/04/18 Python
numpy中矩阵合并的实例
2018/06/15 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
Python中拆分字符串的操作方法
2019/07/23 Python
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2020/02/06 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
11月红领巾广播稿
2014/01/17 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
2015年采购部工作总结
2015/04/23 职场文书
学校计划生育责任书
2015/05/09 职场文书
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python