current position:Home>Vue validation array

Vue validation array

2022-04-29 09:01:46How is waste wood developed

Often encounter attachment upload , Or there is a need to verify the array , Want to use native rules Keep the interface clean , Then I looked at it honestly vue How to customize validation rules . Then encapsulate a validation rule , It's easy to use in the future .

Method 1 、 Simple processing version , Use it directly rules Self contained , But it's a little small bug,F12 When will there be abnormalities , Try to make do with it quickly

1.1 Add rules to the array fields to be verified rule

upFileList: [
          {
            required: true,
            message: ' Be careful : Please upload the attachment ',
            type: 'array'
          },
          {
            message: ' Be careful : Upload at most 5 Attachments ',
            type: 'array',
            min: 1,
            max: 5
          }
        ]

1.2 Fields to be validated , Use hidden fields as needed

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

Method 2 、 Custom validator , The idea is to use Json Convert array to string , Because I use it directly array Type does not trigger verification

2.1、 Custom check type

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 = ' This field '
    }
  }
  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(' Be careful : Please fill in ' + 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(' Be careful : The input length cannot be less than ' + 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(' Be careful : Length cannot be greater than ' + rule.min))
          }
        }
      }
      callback()
    }
  }
}

2.2、 Add rules to the fields to be verified

usscUpListStr: [
  {
    validator: validateArray,
    required: true,
    message: ' Be careful : Please upload photos of unified social credit code '
  },
  {
    validator: validateArray,
    minMessage: ' Be careful : The number of uploads cannot be less than 1', //  Custom properties , Don't use it here message, Otherwise it will be covered 
    maxMessage: ' Be careful : The number of uploads cannot be greater than 2',
    min: 1,
    max: 1
  }
]

2.3、 Fields to be verified list When adding data , Turn down alone string type

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

The approximate effect diagram is as follows , The maximum and minimum value verification can be supported .

copyright notice
author[How is waste wood developed],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204290626303558.html

Random recommended