经常遇到附件上传，或者有需要验证数组的情况，想要使用原生rules保持界面的干净，然后老老实实看了下vue是如何自定义验证规则。然后封装一个验证规则，以后好用。

方法一、简单处理版本，直接使用rules自带的，但是有点小bug，F12时候会有异常，想图快的将就用吧

1.1需要验证的数组字段加规则rule

upFileList: [
          {
            required: true,
            message: '注意：请上传附件',
            type: 'array'
          },
          {
            message: '注意：最多上传5个附件',
            type: 'array',
            min: 1,
            max: 5
          }
        ]

1.2需要验证的字段，根据需要使用隐藏域

<FormItem prop="rectifyOrgId">
     <Input v-model="objectItem.upFileList" style="display: none;" />
 </FormItem>

方法二、自定义验证器，思路是利用Json工具将数组转字符串，因为直接用array类型的不会触发校验

2.1、自定义校验类型

export const validateArray = (rule, value, callback) => {
  let filedName = ''
  let message = ''
  let minMessage = ''
  let maxMessage = ''
  debugger
  if (value === undefined || value === null || value === '') {
    value = '[]'
  }
  value = JSON.parse(value)
  if (typeof rule.message !== 'undefined' && rule.message !== '') {
    message = rule.message
  } else {
    if (typeof rule.filedName !== 'undefined' && rule.filedName !== '') {
      filedName = rule.filedName
    } else {
      filedName = '该字段'
    }
  }
  if (typeof rule.maxMessage !== 'undefined' && rule.maxMessage !== '') {
    maxMessage = rule.maxMessage
  }
  if (typeof rule.minMessage !== 'undefined' && rule.minMessage !== '') {
    minMessage = rule.minMessage
  }
  if (rule.required === false) {
    if (value.length === 0) {
      callback()
    }
  } else {
    if (value.length === 0) {
      if (message) {
        callback(new Error(message))
      } else {
        callback(new Error('注意：请填写' + filedName))
      }
    } else {
      if (typeof rule.min !== 'undefined' && rule.min !== '' && typeof rule.min === 'number') {
        if (value.length < rule.min) {
          if (minMessage) {
            callback(new Error(minMessage))
          } else {
            callback(new Error('注意：输长度不能小于' + rule.min))
          }
        }
      }
      if (typeof rule.max !== 'undefined' && rule.max !== '' && typeof rule.max === 'number') {
        if (value.length > rule.max) {
          if (maxMessage) {
            callback(new Error(maxMessage))
          } else {
            callback(new Error('注意：长度不能大于' + rule.min))
          }
        }
      }
      callback()
    }
  }
}

2.2、需要校验的字段加规则

usscUpListStr: [
  {
    validator: validateArray,
    required: true,
    message: '注意:请上传统一社会信用代码照片'
  },
  {
    validator: validateArray,
    minMessage: '注意:上传的数量不能小于1', // 自定义属性，这里不要用message，不然会被覆盖掉
    maxMessage: '注意:上传的数量不能大于于2',
    min: 1,
    max: 1
  }
]

2.3、需要校验的字段list加入数据时候，单独转下string类型

<td rowspan="4">
  <EpPicUploader
    ref="usscImg"
    :target="target"
    :single-img="true"
    :get-img-api="getImgApi"
    :del-url-path="delUrlPath"
    :file-status-text="statusText"
    :attrs-img="attrsImg"
    :max-size="maxSize"
    :up-list-default="usscUpList"
    :biz-id="bizId"
    @file-complete="fileComplete"
    @file-success="fileSuccess"
    @complete="complete"
    @removeBefore="removeBefore"
    @fileRemovedComplete="fileRemovedComplete"
    @fileRemovedSuccess="fileRemovedSuccess"
    @fileRemovedError="fileRemovedError"
  />
  <FormItem prop="usscUpListStr">
    <Input v-model="machManageObj.vehMachRegInfo.usscUpListStr" style="display: none;" />
  </FormItem>
</td>

<Select v-model="formData.riverBasin" multiple @on-change="onRiverBasinSelect">
                    <Option v-for="item in riverBasinList" :value="item.value" :key="item.value">{{ item.label }}
                    </Option>
                  </Select>
                  <FormItem prop="riverBasinListStr">
                    <Input v-model="formData.riverBasinListStr" style="display: none;"/>
                  </FormItem>

this.machManageObj.vehMachRegInfo.usscUpListStr = JSON.stringify(list)

大概效果图如下，可以支持最大最小值校验。