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 # elementui # 表单验证 # vue表单验证 # vue+elementUI动态增加表单项并添加验证的代码详解 # vue+ElementUI 关闭对话框清空验证 # 清除form表单的操作 # vue elementUI 表单嵌套验证的实例代码 # vue elementui el-form rules动态验证的实例代码详解 # vue+elementUI实现表单和图片上传及验证功能示例 # vue elementui form表单验证的实现 # vue+elementUI用户修改密码的前端验证规则 # 去做 # 弹出 # 是一个 # 表单 # 就会 # 我要 # 列子 # 绑定 # 小编 # 为空 # 输入框 # 的是 # 是在 # 我在 # 都不 # 第一个 # 在此 # 我有 # 可以用 # 提示信息

返回目录在线咨询

上一篇：西班牙网站服务器为何影响SEO排名？
下一篇：关键词优化与反向链接的关系是什么_SEO优化教程

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求