博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue elementUI之Form表单 验证
阅读量:6456 次
发布时间:2019-06-23

本文共 2197 字,大约阅读时间需要 7 分钟。

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

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

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

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

开始验证:(创建弹框的确定按钮 调用的函数,详情看最后一张图)

 

 

addgroupList(formName) {    this.$refs[formName].validate((valid) => {      if (valid) {        const groupName = xxxxxxxxxxxx;        const description = xxxxxxxxxxxx;        axios({          method: 'post',          url: 'xxxxxxxxxxxxxxxxxxxxx',          data: {            groupName: xxxxxxxxxxxxx,            groupDescription: xxxxxxxxxxxxxxx          }               }).then(res => {          this.creatGroup = false;          this.searchGroupName = '';          this.initData();        }).catch(error => {          console.log('网络错误,不能访问');        });      } else {          console.log('error submit!!');          return false;        }      });   },

 

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

1 let flag = true; 2       if (this.$refs[formName] instanceof Array && this.$refs[formName].length > 0) { 3         this.$refs[formName].forEach((obj, index) => { 4           obj.validate((valid) => { 5             if (valid) { 6               console.log('验证成功!'); 17             } else {18               console.log('error submit!!');19               flag = false;20               return false;21             }22           });23         });24 25         if (flag) {26           this.secondDialog = false;27           this.thirdDialog = true;28         }29       }

 

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

1 let flag = true;2   this.requestParamsList.map((data, index) => {3         if (data.paramName == "") {4           $(".jqueryValidate").eq(index).show();5           flag = false;6         }7     });

最终效果图如下:

以上就是今天给大家分享的内容,希望大家多多提出自己的建议,谢谢

 

 

 

如果我的内容对你有帮助,欢迎打赏

转载于:https://www.cnblogs.com/hezihao/p/7404409.html

你可能感兴趣的文章
QPython 打造一个全自动智能微信跳一跳辅助!(手机本地运行)
查看>>
HashTable、HashMap、ConcurrentHashMap、Collections.synchronizedMap()区别
查看>>
selenium+python之操作元素
查看>>
利用python定位网页上的元素
查看>>
C#用反射判断一个类型是否是Nullable同时获取它的根类型(转自网络)
查看>>
查找数据库备注信息
查看>>
自定义input的file样式
查看>>
POJ-3565 Ants---KM算法+slack优化
查看>>
使用selenium找出外卖点餐次数最多的10个顾客
查看>>
html学习笔记css
查看>>
vuejs目录介绍
查看>>
IT人的学习方法论-5,也谈IT的创新
查看>>
开店攻略: 现代促销的七种促销策略
查看>>
springboot kafka @@KafkaListener 批处理消息
查看>>
python错误处理/调试/单元测试/文档测试
查看>>
HDU2546题解
查看>>
PHP-mac下的配置及运行
查看>>
输出运算符号时的不同
查看>>
文档流
查看>>
hackerrank---Find a string
查看>>