Vue表單驗證

• Vue有許多外掛,Vue外掛
• vee-validate：vue最好的驗證外掛。vee-validate

1. vee-validate自然輸入校驗

使用步驟：

1. 安裝：

   npm i vee-validate
   

2. 建立獨立校驗檔案utils/validate.js，匯入預設校驗規則。

   技術支援及細節說明

   示例程式碼：

   import { extend } from 'vee-validate'
   import * as rules from 'vee-validate/dist/rules'
   // rules: {alpha:xx,alpha_dash:xx,alpha_num:xx……}
   Object.keys(rules).forEach(rule => {
     extend(rule, rules[rule])
   })
   // Object.keys(rules) 獲得物件中全部的屬性名稱，
   // 並以陣列返回["alpha", "alpha_dash", "alpha_num", ……]
   // extend(rule, rules[rule]) 完成每個內建校驗規則的註冊操作
   

   各種校驗規則：

   規則	含義
   alpha	只包含英文字元
   alpha_dash	可以包含英文、數字、下劃線、破折號
   alpha_num	可以包含英文和數字
   alpha_spaces	可以包含英文和數字
   between:{min},{max}	在min和max之間的數字
   confirmed:{target}	必須和target一樣
   digits:{length}	長度為length的數字
   dimensions:{width},{height}	符合寬高規定的圖片
   email	符合郵箱規則
   excluded	排除，不包括
   ext:[extensions]	字尾名
   image	圖片
   integer	整型
   is	必須是
   is_not	不是
   length	規定輸入內容長度
   max:{length}	規定輸入內容的最大長度為length
   min:{length}	規定輸入內容的最小長度為length
   max_value:{val}	規定輸入最大數值為val的
   min_value:{val}	規定輸入最小數值為val的
   mimes:[list]	檔案型別
   numeric	只允許數字
   oneOf	其中之一
   regex	匹配正規表示式
   required	必填專案
   required_if	僅當目標欄位（第一個引數）設定為指定值（其他引數）之一時，驗證中的欄位才必須具有非空值
   size:{kb}	檔案大小不超過

3. main.js檔案引入驗證獨立檔案:

   import '@/utils/validate.js' // 驗證相關
   

4. 登入元件應用驗證:

   基本使用和新增規則技術支援

   <!-- user/login.vue -->
   <van-cell-group>
       <!-- 表單域校驗，通過 ValidationProvider 對被校驗的專案做包圍
            name：校驗失敗，提示當前專案名稱,定義校驗欄位名稱，用作錯誤提示使用
            rules：設定校驗規則，required 必填
            v-slot: 接收"作用域插槽"資料，即校驗失敗錯誤資訊
   		注意：當前這個地方只能使用v-slot（使用slot-scope，頁面沒有效果）-->
       <ValidationProvider name="手機號" rules="required" v-slot="{ errors }">
       <!-- 把校驗的錯誤資訊展示出來，error-message：顯示校驗失敗的錯誤資訊 -->
           <van-field v-model="loginForm.mobile" type="text" placeholder="請輸入手機號碼"
                      label="手機號" required clearable :error-message="errors[0]" />
           <!-- van-field通過:error-message接收、顯示校驗錯誤資訊 -->
       </ValidationProvider>
       <ValidationProvider name="驗證碼" rules="required" v-slot="{ errors }">
           <van-field v-model="loginForm.code" type="password" placeholder="請輸入驗證碼"
                      label="驗證碼" required clearable :error-message="errors[0]" />
               <!-- 命名插槽應用，提示相關按鈕，是要給van-field元件內部的slot去填充的 -->
               <van-button slot="button" size="small" type="primary">傳送驗證碼</van-button>
           </van-field>
       </ValidationProvider>
   </van-cell-group>
   ……
   <script>
       // import匯入需要的模組 ValidationProvider，並components私有方式註冊
       import { ValidationProvider } from 'vee-validate'
       export default {
           name: 'user-login',
           components: {
               // 註冊
               ValidationProvider
           },
       }
   </script>
   

   此時已經可以實現校驗，但是預設錯誤資訊是英文的:

   

   v-slot說明：

   ​ https://blog.csdn.net/liushijun_/article/details/92186739

   ​ https://www.cnblogs.com/qhantime/p/11410073.html

   之前使用slot-scope接收子元件作用域插槽的資料資訊，在vue新版本中，可以通過v-slot接收作用域插槽資料，格式就是 v-slot="資料名稱"。

   slot-scope="stData" {{stData.errors[0]}}表現具體校驗失敗錯誤資訊。
   形式上：v-slot="stData" slot-scope="stData"就是一樣的。

   v-slot="{errors}" 物件解構賦值 errors[0]
v-slot="stData" {{stData.errors[0]}}

   當前校驗部分，errors[0] 可以訪問到校驗失敗的錯誤資訊,固定用法。

   v-slot和slot-scope的區別:

   • v-slot 只能被用在 元件標籤 或 template 標籤身上

   • slot-scope 可以被應用在 元件標籤 、普通html標籤、template標籤 上

   <template slot-scope="stData"></template>
   <template v-slot="stData"></template>
   

5. 設定提示語言(預設是英文提示)

   對 src/utils/validate.js 檔案內容繼續豐富資訊，引入localize、zh_CN.js、註冊中文、使用中文：

   語言技術支援

   // 1. 匯入localize模組函式
   import { extend, localize } from 'vee-validate'
   // 匯入全部的規則
   import * as rules from 'vee-validate/dist/rules'
   
   // 2.匯入要使用的語言
   import zhCN from 'vee-validate/dist/locale/zh_CN.json'
   
   // 3.對匯入好的語言做註冊
   localize({
     // 物件成員簡易賦值
     zhCN
   })
   // 4. 使用具體的語言
   localize('zhCN')
   
   // 遍歷、註冊全部的規則
   Object.keys(rules).forEach(rule => {
     extend(rule, rules[rule])
   })
   

   經過上述4個步驟，現在語言就是中文的：

   

6. 自定義校驗規則

   技術支援

   在 src/utils/validate.js檔案最後新增如下內容：

   // 為校驗手機號碼，自定義規則
   // phone:規則名稱
   // value:被校驗的資料
   extend('phone', {
     validate: value => {
       // return true  校驗成功
       // return false 校驗失敗
       const reg = /^1[35789]\d{9}$/ // 正則校驗手機號碼
       return reg.test(value) // 正則匹配目標內容，返回boolean
    },
     // 校驗失敗的錯誤資訊{_field_}代表被校驗專案的name的名稱
    message: '{_field_}格式不正確'
   })
   

   在手機號碼錶單域中使用上述校驗規則：

   <ValidationProvider v-slot="{errors}" rules="required|phone" name="手機號碼">
   

   效果：

   

2. validate表單整體校驗

• 登入動作發生時觸發驗證功能。

步驟：

1. 在 user/login.vue 中引入 註冊 ValidationObserver 元件。
2. 把全部的表單專案通過 ValidationObserver 元件圈選，並設定ref屬性。
3. 單擊登入按鈕後，使得 ValidationObserver 呼叫validate方法對全部表單專案進行校驗。

技術支援

示例程式碼：

<!-- user/login.vue -->
<!-- 用ValidationObserver元件把全部的校驗專案給包圍起來
ref設定好，使得元件例項可以通過this.$refs.xx 的方式獲得當前的元件物件 -->
<ValidationObserver ref="loginFormRef">
  <ValidationProvider v-slot="{errors}" rules="required|phone" name="手機號碼">
    ……
  </ValidationProvider>
  <ValidationProvider v-slot="{errors}" rules="required" name="密碼">
    ……
  </ValidationProvider>
</ValidationObserver>

import { ValidationProvider, ValidationObserver } from 'vee-validate'
……
components: {
  ValidationProvider,
  ValidationObserver
},
methods: {
  // 登入系統
  async login () {
    // 對錶單全部專案做校驗，沒有問題再向下執行
    // ValidationObserver
    // validate()返回promise物件
    // valid=true  校驗成功    valid=false  校驗失敗
    const valid = await this.$refs.loginFormRef.validate()
    if (!valid) {
      // 校驗失敗，停止後續程式碼執行
      return false
    }

    // 呼叫api，校驗賬號資訊有效，如下api請求有可能【成功】，還有可能【失敗】
    try {
      const result = await apiUserLogin(this.loginForm)
      // console.log(result) // {token:xx,refresh_token:xx}
      
      // 通過vuex維護伺服器端返回的token等祕鑰資訊
      this.$store.commit('updateUser', result)

      this.$toast.success('登入成功')
      // 頁面跳轉
      this.$router.push('/')
    } catch (err) {
      // 錯誤資訊提示 vant元件庫方法
      this.$toast.fail('手機號或驗證碼錯誤' + err)
    }
  }
}

注意：

1. validate()方法呼叫完畢會返回 Promise物件結果，需要通過await修飾使用。