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 相关文章推荐
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
Aug 08 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
js类定义函数时用prototype与不用的区别示例介绍
Jun 10 Javascript
Javascript 数组排序详解
Oct 22 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
JS实现的左侧竖向滑动菜单效果代码
Oct 19 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
javascript 中select框触发事件过程的分析
Aug 01 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 Javascript
vue - vue.config.js中devServer配置方式
Oct 30 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图像处理类库及演示分享
2015/05/17 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
Laravel推荐使用的十个辅助函数
2019/05/10 PHP
javascript 触发事件列表 比较不错
2009/09/03 Javascript
javascript类继承机制的原理分析
2009/09/12 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
浅谈 javascript 事件处理
2015/01/04 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
2015/12/03 Javascript
微信小程序 toast 详解及实例代码
2016/11/09 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
详解10分钟学会vue滚动行为
2017/09/21 Javascript
vue项目中跳转到外部链接的实例讲解
2018/09/20 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
基于canvas实现手写签名(vue)
2020/05/21 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
python全栈要学什么 python全栈学习路线
2019/06/28 Python
django formset实现数据表的批量操作的示例代码
2019/12/06 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
用pip给python安装matplotlib库的详细教程
2021/02/24 Python
详解如何在css3打包后自动追加前缀插件:autoprefixer
2018/12/18 HTML / CSS
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
餐饮业会计岗位职责
2013/12/19 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
后进生评语大全
2015/01/04 职场文书
消防验收申请报告
2015/05/15 职场文书
婚礼父母致辞
2015/07/28 职场文书
自书遗嘱范文
2015/08/07 职场文书
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS
python中urllib包的网络请求教程
2022/04/19 Python
Golang 链表的学习和使用
2022/04/19 Golang