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 相关文章推荐
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
Sep 27 Javascript
Javascript实现div的toggle效果实例分析
Jun 09 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 Javascript
详解Node.Js如何处理post数据
Sep 19 Javascript
Vue.js中数组变动的检测详解
Oct 12 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
vue resource post请求时遇到的坑
Oct 19 Javascript
微信小程序之数据绑定原理解析
Aug 14 Javascript
Vue自定义组件的四种方式示例详解
Feb 28 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
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
详解PHP中strlen和mb_strlen函数的区别
2014/03/07 PHP
简单的php新闻发布系统教程
2014/05/09 PHP
php的mssql数据库连接类实例
2014/11/28 PHP
PHP四种基本排序算法示例
2015/04/09 PHP
深入浅析PHP7.0新特征(五大新特征)
2015/10/29 PHP
thinkPHP中create方法与令牌验证实例浅析
2015/12/08 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
PHP实现的二分查找算法实例分析
2017/12/19 PHP
为原生js Array增加each方法
2012/04/07 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
2012/10/12 Javascript
jQuery 属性选择器element[herf*='value']使用示例
2013/10/20 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
python之PyMongo使用总结
2017/05/26 Python
用python生成1000个txt文件的方法
2018/10/25 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
python实现PID算法及测试的例子
2019/08/08 Python
python烟花效果的代码实例
2020/02/25 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
计算机网络专业推荐信
2013/11/24 职场文书
挖掘机司机岗位职责
2014/02/12 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
初中团委工作总结
2015/08/13 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书
MySQL数据库事务的四大特性
2022/04/20 MySQL