vue2中rules的校验问题，请各位专家解答！(语言-javascript)

vue2 用rules中的validator验证form 有提示但是this.$refs.xxx.validate(valid=>{console.log(valid)})一直是true 你因为啥

你用的是不是elementui框架

帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7776879
你也可以参考下这篇文章：vue rules验证有值，但验证失败
除此之外, 这篇博客: vue 开发批量上传图片及自定义中的 javascript部分 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

//添加图片函数，此时将input组件(type="file")显示出来，进行图片的上传
addImg(n) {
  this.n = n;
  this.imgInput = true;
  this.$nextTick(() => {//页面渲染完成后，执行该组件的click方法，如果选择了图片则会执行changeImg函数
      this.$refs.imgUpload.click();
  });
},
//选择图片后的上传函数
changeImg(file) {
  var files = file.target.files;
  if (!files.length) {
      return;
  }
  for (var m = 0; m < files.length; m++) {//遍历，对图片的格式进行校验
      if (files[m].type === "image/jpeg" || files[m].type === "image/jpg" || files[m].type === "image/gif" || files[m].type === "image/png") { console.log("格式正确"); } else {
          this.$message.error("文件格式错误！");
          return;
      }
      const isLt5M = files[m].size / 1024 / 1024 < 5;//对图片的大小进行校验
      if (!isLt5M) {
          this.$message.error("上传图片大小不能超过 5MB!");
          return;
      }
      //将本地的图片上传到阿里oss存储器，然后返回一个线上的链接，将此链接保存下来，用于整体数据的提交
      var formData = new FormData();//formData的格式处理图片数据
      formData.append('UpImgFiles', files[m])//上传图片的接口要求字段名为：UpImgFiles，而且属性值为二进制形式
      formData.append('type', 0)//type也是上传图片的接口要求的属性名
      if (this.n == 0) {
          this.btnLoading0 = true;//上传图片的过程中为了防止用户重复点击，做了一个节流
          this.$refs.yingye.clearValidate();//这个是为了清除图片校验，如果图片必传，点击提交时，会提示图片必传，上传图片后，"图片必传"的提示并不会自动消失，此时可以手动清除一下，不用也可以。
      } else if (this.n == 1) {
          this.btnLoading1 = true;
          this.$refs.daili.clearValidate();
      } else if (this.n == 2) {
          this.btnLoading2 = true;
          this.$refs.tixi.clearValidate();
      } else if (this.n == 3) {
          this.btnLoading3 = true;
          this.$refs.kehu.clearValidate();
      } else if (this.n == 4) {
          this.btnLoading4 = true;
          this.$refs.gouwu.clearValidate();
      }
      $.ajax({
          type: 'post',
          url: "/SysArea/Supplier/UpFile",
          data: formData,
          cache: false,
          processData: false,
          contentType: false,
      }).success(data => {
          if (data.Code == 200) {
              if (this.n == 0) {
                  this.btnLoading0 = false;
                  this.supplierObj.businessLicenseUrl = data.Data;
                  this.$set(this.supplierObj, 'businessLicenseUrl', data.Data);
              } else if (this.n == 1) {
                  this.btnLoading1 = false;//多个图片的上传，将返回的图片链接push到对应的字段中
                  this.supplierObj.agentCertificateUrls.push(data.Data);
                  this.agentCertificateEndTimes.push({ value: "" });//图片上传后，对应的时间数组也要添加一条
                  this.$set(this.supplierObj, 'agentCertificateUrls', this.supplierObj.agentCertificateUrls);
              } else if (this.n == 2) {
                  this.btnLoading2 = false;
                  this.supplierObj.certificateUrl = data.Data;
                  this.$set(this.supplierObj, 'certificateUrl', data.Data);
              } else if (this.n == 3) {
                  this.btnLoading3 = false;
                  this.supplierObj.authorizationUrl = data.Data;
                  this.$set(this.supplierObj, 'authorizationUrl', data.Data);
              } else {
                  this.btnLoading4 = false;
                  this.supplierObj.transactionUrls.push(data.Data);
                  this.$set(this.supplierObj, 'transactionUrls', this.supplierObj.transactionUrls);
              }
          }
      }).error(() => {
          this.$message.error('上传图片异常');
          return;
      });
  }
},
mouseleave() {
  this.isShow = -1;
},
delImg(name,arrName) {
  if (this.disabled) {
      return;
  }
  if (arrName) {//删除图片后，对应的时间也要删除
      this.supplierObj[arrName].splice(name, 1);
      if (arrName == 'agentCertificateUrls') {
          this.agentCertificateEndTimes.splice(name,1);
      }
  } else {
      this.supplierObj[name] = null;
  }
},
bosst(url) {
  this.dialogVisible = true;
  this.dialogImg = url;
},

您还可以看一下汤小洋老师的Vue.js 2.0之全家桶系列视频课程课程中的单向数据流小节, 巩固相关知识点
以下回答由chatgpt基于相关博客总结生成:
对于vue2表单校验中的问题，可以对rules中的每一个规则进行遍历并执行，遇到不通过的规则将其记录下来，最后一起返回所有不通过的规则信息。具体步骤如下：
1. 对rules中每一个规则进行遍历，可以使用forEach方法。遍历时可以定义一个空数组，用于存放所有不通过的规则信息。
2. 对于每一个规则，定义一个变量用于存储其是否通过校验。在该规则的校验函数中，若校验失败，则将该变量赋值为false。
3. 如果该规则校验失败，则将该规则的信息存入之前定义的数组中，包括字段名称和规则校验失败的原因等信息。
4. 遍历结束后，如果数组中有不通过的规则信息，则返回这些信息。如果数组中没有信息，则表示所有规则都通过校验。
代码示例：
```
function validateForm(formData, rules) {
  let errorList = [] // 存储所有错误信息的数组
  Object.keys(rules).forEach(key => { // 遍历所有规则
    let value = formData[key] // 获取对应的数据值
    rules[key].forEach(rule => { // 遍历该字段的所有规则
      if (!rule.validator(value)) { // 如果校验不通过
        errorList.push({ // 存储错误信息
          field: key,
          message: rule.message
        })
      }
    })
  })
  return errorList.length ? errorList : null // 如果有错误信息则返回该数组，否则返回 null
}
```
需要注意的是，上述代码中的 validator 和 message 属性需要在定义 rules 时进行定义，例如：
```
const rules = {
  username: [
    { required: true, message: '用户名不能为空', validator: (value) => !!value },
    { pattern: /^[a-zA-Z]+$/, message: '用户名必须是英文字母', validator: (value) => /^[a-zA-Z]+$/.test(value) },
  ],
  password: [
    { required: true, message: '密码不能为空', validator: (value) => !!value },
    { min: 6, message: '密码长度不能少于6位', validator: (value) => value.length >= 6 },
  ],
}
```
在上述代码中，每一个规则都包含了 validator 和 message 两个属性，分别用于校验该规则是否通过和当校验失败时显示的错误信息。validator 属性为一个函数，接受待校验的值作为参数，如果校验通过则返回 true，否则返回 false。