てりーのフロントエンドBLOG

VeeValidateでカスタムバリデーションを実装する

その他

こんにちは、フロントエンドエンジニアのてりーです。

Veevalidateに備わっているバリデーション以外のバリデーションを実装する場合はカスタムルールを自作する必要があります。

目次

そもそも備わっているバリデーションは何があるの？

ここに利用可能なルール一覧があります。

https://vee-validate.logaretm.com/v4/v4/guide/global-validators#available-rules

よく使う所だと「email」、「min」、「max」辺りですかね。

カスタムバリデーションの作り方

上記のrule以外を自分で実装する場合はカスタムバリデーションを作る必要があります。

基本形は以下のようになります。

//ルール名
extend(test', {

　//引数
　params: [
 　{name: '',}
　],

　//エラーメッセージ
　message: 'だめよ〜ん',

　//バリデーションルール
　validate(value, {name}) {
　　return value !== name;
　}
});

実例：メールアドレス（サブ）入力時に「メールアドレス（メイン）と同一の値を取れない」を実装する

イメージを掴み為に具体的な実例も見ていきましょう。

extend('emailUnique', {
　　//メールアドレス（メイン）を受け取る
    params: ['target'], 

　　//value（入力値）とメールアドレス（メイン）が一致したらmessageを返す
    validate(value, { target }) {
      return value !== target
    },
   
    //メッセージ
    message: 'メールアドレス（A）と同じ値は設定できません。'
  })
 ```
 <validation-provider
          name="メールアドレス(サブ)"
          :rules="'email|max_string:100|emailUnique:@メールアドレス(メイン)'"
        >

割と簡単に実装できましたね。

以上です。

初めてweb開発の現場に入った時にVue.jsの勉強用に買った本を思い出に添付。