Vue vee-validateプラグインの簡単な使用

1.据え付け

npm i [email protected]

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 vee-validateプラグインの簡単な使用の詳細です。Vue vee-validateプラグインに関する資料は他の関連記事に注目してください。