Vue中vee-validate插件怎么安裝使用

這篇文章主要介紹“Vue中vee-validate插件怎么使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vue中vee-validate插件怎么使用”文章能幫助大家解決問題。

1.安裝

npm i vee-validate@4.0.3

2.導入

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

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

// 創建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個數字'
    return true
  },
  isAgree (value) {
    if (!value) return '請勾選同意用戶協議'
    return true
  }
}

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

// validation-schema="mySchema"  配置校驗規則
// v-slot：導出錯誤對象
<Form
  :validation-schema="mySchema"
  v-slot="{ errors }"
>
 <!-- 表單元素 -->
</Form>

<script>
  import schema from '@/utils/vee-validate-schema'
  setup () {
    // 表單對象數據
    const form = reactive({
      account: null, // 賬號
      password: null // 密碼
    })
    // 校驗規則對象
    const mySchema = {
      account: schema.account,
      password: schema.password
    }
    return { form, mySchema }
 } 
</script>

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

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

<Field
      v-model="form.account"
      name="account" 
      type="text"
      placeholder="請輸入用戶名"
      :class="{ error: errors.account }" // 如果返回錯誤信息,為true 顯示類error
    />
    <!-- <input type="text" placeholder="請輸入用戶名" /> -->

6.補充表單數據和驗證規則數據

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

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

Vue的優點

Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。

關于“Vue中vee-validate插件怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。