element ui表單校驗-文件上傳組件校驗

最近作了一個表單，涉及到文件上傳項的校驗。可是發現element ui對上傳組件的校驗是不會自動觸發的。只有在點保存時，手動調用表單的validate方法纔會觸發綁定在upload組件上的rules。

那如何解決在fileList有改變時自動觸發校驗呢？我我的想了一個比較簡單省事的方法，在這跟你們分享一下！

在upload的on-change鉤子函數中，手動填充校驗錯誤信息。以下圖：

代碼以下：

setValidationMessage(refVal, type, message) {
  this.$refs[refVal].validateState = type
  this.$refs[refVal].validateMessage = message
}
複製代碼

// 在upload組件on-change的鉤子函數中調用上面的方法便可
onFileChange(file, fileList) {
    const isRar = (file.raw.type === 'application/x-rar-compressed')
    const isZip = (file.raw.type === 'application/zip')
    if (!(isRar || isZip)) {
      const message = '上傳文件只能是 rar、zip 格式!'
      // set validation message manually
      this.setValidationMessage('fileItem', 'error', message)
      this.form.fileList = []
      return
    }
    // clear validation message(驗證經過後清除錯誤提示)
    this.form.fileList.length & this.$refs['fileItem'].clearValidate()
}
複製代碼

後來我去查相關資料，有人經過擴展組件，監聽文件值的變化，在調用單個field的validate方法也能夠達到目的。

不想不擴展組件的同窗 ，能夠參考我這個方法。

最後，以爲還不錯的，記得點贊支持哦！