Vue中vee-validate插件怎么使用

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

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

1.安裝

npm i vee-validate@4.0.3

2.導(dǎo)入

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

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

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

4.使用Form組件配置校驗(yàn)規(guī)則和錯(cuò)誤對(duì)象 (form 和 Field都是從插件中按需導(dǎo)出)

// validation-schema="mySchema"  配置校驗(yàn)規(guī)則
// v-slot：導(dǎo)出錯(cuò)誤對(duì)象
<Form
  :validation-schema="mySchema"
  v-slot="{ errors }"
>
 <!-- 表單元素 -->
</Form>

<script>
  import schema from '@/utils/vee-validate-schema'
  setup () {
    // 表單對(duì)象數(shù)據(jù)
    const form = reactive({
      account: null, // 賬號(hào)
      password: null // 密碼
    })
    // 校驗(yàn)規(guī)則對(duì)象
    const mySchema = {
      account: schema.account,
      password: schema.password
    }
    return { form, mySchema }
 } 
</script>

5.使用 Field 組件，添加表單項(xiàng)目校驗(yàn)

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

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

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

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

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

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

新聞標(biāo)題：Vue中vee-validate插件怎么使用
鏈接URL：http://muchs.cn/article0/gddeoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、網(wǎng)站導(dǎo)航、網(wǎng)站營銷、網(wǎng)站設(shè)計(jì)公司、面包屑導(dǎo)航、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)