当前位置:首页 > 日记 > 正文

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

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

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

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

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

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

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

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打包后显示空白正确处理方法

vue打包后显示空白正确处理方法

方法,显示,正确处理,空白,电脑软件,在项目中很多时候需要用到vue打包成html不需要放在服务器上就能浏览。根据官网打包出来的html直接打开是显示空白。vue打包后显示空白正确处理方法是1、找到配置文件修改这样打包处理可以打开但是页面样…

微信小程序(六):列表上拉加载下拉刷新

微信小程序(六):列表上拉加载下拉刷新

下拉刷新,列表,上拉加载,示例,程序,1.列表(本部分内容出入官方文档)对于这个功能,微信小程序中并没有提供类似于Android中listview性质的控件,所以我们需要使用 wx:for 控制属性绑定一个数组,用数组中各项的数据重复渲染该组件,来达到列表的效果…

apache2.0x 开启gzip压缩和http缓

apache2.0x 开启gzip压缩和http缓

配置,缓存,压缩,方法,电脑软件,先谈gzip的配置方法,在apache2.0以上(包括apache2.0)的版中gzip压缩使用的是mod_deflate模块,下面是具体配置步骤:第1步LoadModule deflate_module modules/mod_deflate.soLoadModule headers_module modules/mod_…

JS 实现banner轮播效果 | 鼠标事件

JS 实现banner轮播效果 | 鼠标事件

鼠标事件,效果,电脑软件,JS,banner,一.要实现的效果1.点击左右可切换图片2.点击小圆点 可切换图片二.效果图三.代码1.css<style type="text/css">body,img,span,ul,li{margin: 0;padding: 0;}#div1{width: 600px;height: 350px;margin: 1…

配置IIS服务器,支持sis、SISX、3GP

配置IIS服务器,支持sis、SISX、3GP

服务器,支持,配置,文件下载,电脑软件,配置IIS服务器,支持sis、SISX、3GP、ADP、AMR、JAD、JAR、MMF、MFM、PMD、UMD等文件下载 问:如何开通WAP网站呢,让更多朋友通过手机来浏览的我网站呢?答:浏览WAP网站与WEB网站都是需要服务器端和终端支持的,W…

HTTP 错误 500.19 - Internal Serv

HTTP 错误 500.19 - Internal Serv

错误,解决办法,详解,电脑软件,HTTP,HTTP 错误 500.19 - Internal Server Error最近做项目出现了这个错误,经过同事之间的讨论未能解决,之后百度一下找到了解决方法,这里就说下希望大家遇到这种错误可以顺利解决。无法访问请求的页面,因为该页的…

服务器上映射出20M的磁盘且无法分

服务器上映射出20M的磁盘且无法分

磁盘,格式化,服务器,射出,电脑软件,问题描述:用户反映SureFibre 640存储在服务器上自动映射出20M的磁盘,且无法分区格式化、更加无法使用。原因分析:目前在销的SureFibre系列存储,都具备带内管理的功能,如果启用了带内管理而没有安装带内管理代…

正则表达式d元字符 | 相对于数字0-

正则表达式d元字符 | 相对于数字0-

元字符,数字,正则表达式,相对于,电脑软件,正则表达式\d元字符:\d元字符可以匹配数字字符,等价于"[0-9]"。语法结构:构造函数方式:new RegExp(\\d)对象直接量方式:/\d/浏览器支持:IE浏览器支持此元字符。火狐浏览器支持此元字符。谷歌…

详解JavaScript数组过滤相同元素的

详解JavaScript数组过滤相同元素的

元素,数组,过滤,种方法,详解,方法一:比较内层循环变量的值.var arr = [1, 2, 3, 1, 3, 4, 5, 5];var resultArr = [];for (i = 0; i < arr.length; i++) { for (j = 0; j < resultArr.length; j++) { if (resultArr[j] == arr[i]) { …

Bootstrap Multiselect插件使用步

Bootstrap Multiselect插件使用步

参数,插件使用,步骤,配置详解,常见, Multiselect是基于jQuery插件的,它可以以下拉列表的形式为用户提供选择内容,能进行单选或者多选。它应用的主要步骤如下:一,引入需要的相关js和css文件既然是Bootstrap插件,又是基于jQuery的,很明显主要就导入…

jQuery动态生成不规则表格 | 前后

jQuery动态生成不规则表格 | 前后

动态生成,不规则,表格,电脑软件,jQuery,一、需求:有这么一张表前四个属性当作联合主键需要把该表所有的行在前端以表格形式显示出来,要求activityId相同时合并成一行,activityCode相同时,合并一行,activityVersion相同时也合并一行。类似这种:二…