技術標籤：Vue前端Typescriptjstypescriptelementuivue

Typescript + Vue 2.x版本，使用element-ui中form表單驗證的問題記錄

• 報錯：Property 'validate' does not exist on type 'Vue | Element | Vue[] | Element[]'. Property 'validate' does not exist on type 'Vue'.
• • • 錯誤分析:
    • 解決方法：
• 錯誤：form的validate（）方法不執行（不進入該方法）
• • • 錯誤分析：
    • 注意：此處自定義的校驗方法，使用官方示例中 的 箭頭函式
      的定義時，會導致無法觸發（具體原因未知，初步分析是this指向問題），切換成普通函式的寫法即可正常觸發。
• 錯誤：無法獲取在方法中return的值
• • • 錯誤寫法：
    • 正確寫法：
    • 其他嘗試
• 提前祝大家新年快樂

報錯：Property ‘validate’ does not exist on type ‘Vue | Element | Vue[] | Element[]’. Property ‘validate’ does not exist on type ‘Vue’.

錯誤分析:

  Property ‘validate’ does not exist on type ‘Vue | Element | Vue[] | Element[]’ 意思是說validate找不到，它不知道是哪個型別的屬性，因為我們這裡用到了TypeScript，而TypeScript 又是強型別檢查所以報了這個錯。

解決方法：

 validate找不到型別，此時可以使用型別斷言，將 validate 斷言成： HTMLFormElement，親測有效。

submitForm(formName) {
    const ref:any = this.$refs[formName] as HTMLFormElement
    ref.validate((valid:boolean) => {
      if (valid) {
      // 處理邏輯
      }
    })
  }

或者使用：

// 引入el-form
import { Form } from 'element-ui'

//進行表單驗證
 

submitForm(formName) {
    (this.$refs[formName] as Form).validate((valid:boolean) => {
      if (valid) {
      // 處理邏輯
      }
    })
  }

錯誤：form的validate（）方法不執行（不進入該方法）

  即在提交表單驗證時，validate() 方法中的邏輯無法執行，導致表單驗證失效

錯誤分析：

  自定義校驗規則時，需要新增callback回撥，否則規則執行不過去。

private checkName(rule:any, value:any, callback:any) {
    if (value === '') {
      callback(new Error('名稱不能為空'))
    } else {
      callback()  // 注意條件預計else裡，也需要新增callback。即就是 if else 語句中都需要新增callback
    }
  }

注意：此處自定義的校驗方法，使用官方示例中 的 箭頭函式 的定義時，會導致無法觸發（具體原因未知，初步分析是this指向問題），切換成普通函式的寫法即可正常觸發。

錯誤：無法獲取在方法中return的值

  表單驗證中，需要對錶單輸入的使用者名稱稱進行是否可用的驗證，向後臺查詢是否存在，若存在需要在表單驗證中給出相應的錯誤提示。所以需要將介面返回的值作為判斷依據。

錯誤寫法：

mounted() {
    this.isVisiableName = this.checkNameVisiable('')
    console.log(this.isVisiableName) //undefined
  }

  private checkNameVisiable(value:string) {
    checkName({'userName':value}).then(res=> {
      return res.data
    })
  }

正確寫法：

mounted() {
    this.checkNameVisiable('',(data)=>{
      console.log(data) 
    })
  }

  private checkNameVisiable(value:string,callback:any) {
    checkName({'userName':value}).then(res=> {
      callback( res.data)
    })
  }

其他嘗試

  嘗試定義一個變數由於接收 查詢返回的值（將查詢會的值賦值給此變數），在使用此變數在表單驗證中進行判斷。但依然正常無法獲得改值，原因可能是請求操作是非同步的，在表單驗證是非同步請求的結果尚未返回，而結果返回後並不能在此觸發表單驗證。
  嘗試給上述方式新增延時器setTimeout，在查下返回後再執行表單驗證，但不幸的是，依然無法正確生效。
  如有更好的方法，歡迎指教！！！

提前祝大家新年快樂

  還有30多個小時就進入2021年了，提前祝大家新年快樂，身體健康！