本文小編為大家詳細介紹“Vue中vee-validate插件怎么使用”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“Vue中vee-validate插件怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

網(wǎng)站設計制作、網(wǎng)站設計服務團隊是一支充滿著熱情的團隊，執(zhí)著、敏銳、追求更好，是創(chuàng)新互聯(lián)的標準與要求，同時竭誠為客戶提供服務是我們的理念。成都創(chuàng)新互聯(lián)把每個網(wǎng)站當做一個產(chǎn)品來開發(fā)，精雕細琢，追求一名工匠心中的細致，我們更用心！

1.安裝

npm i vee-validate@4.0.3

2.導入

import { Form, Field } from 'vee-validate'

3.定義校驗規(guī)則(最好是在utils文件夾中單獨封裝js文件導出)

// 創(chuàng)建js文件進行導出
export default {
  // 校驗項account
  account (value) {
    if (!value) return '不能為空'// 條件判斷,
    return true // 最后全部通過必須return true
  },
  password (value) {
    if (!value) return '請輸入密碼'
    if (!/^\w{6,24}$/.test(value)) return '密碼是6-24個字符'
    return true
  },
  mobile (value) {
    if (!value) return '請輸入手機號'
    if (!/^1[3-9]\d{9}$/.test(value)) return '手機號格式錯誤'
    return true
  },
  code (value) {
    if (!value) return '請輸入驗證碼'
    if (!/^\d{6}$/.test(value)) return '驗證碼是6個數(shù)字'
    return true
  },
  isAgree (value) {
    if (!value) return '請勾選同意用戶協(xié)議'
    return true
  }
}

4.使用Form組件配置校驗規(guī)則和錯誤對象 (form 和 Field都是從插件中按需導出)

// validation-schema="mySchema"  配置校驗規(guī)則
// v-slot：導出錯誤對象

 

5.使用 Field 組件，添加表單項目校驗

//1. 把input改成 `Field` 組件，默認解析成input
//2. `Field` 添加name屬性，作用是指定使用schema中哪個校驗規(guī)則
//3. `Field`添加v-model，作用是提供表單數(shù)據(jù)的雙向綁定
//4. 發(fā)生表單校驗錯誤，顯示錯誤類名`error`，提示紅色邊框


    

6.補充表單數(shù)據(jù)和驗證規(guī)則數(shù)據(jù)

// 表單綁定的數(shù)據(jù)
const form = reactive({
  account: null, // 賬號
  password: null, // 密碼
  isAgree: true // 是否選中
})

// 聲明當前表單需要的校驗數(shù)據(jù)規(guī)則
const curSchema = reactive({
  account: schema.account, // 賬號
  password: schema.password, // 密碼
  isAgree: schema.isAgree // 是否選中
})

讀到這里，這篇“Vue中vee-validate插件怎么使用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內(nèi)容的文章，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。