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

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:@メールアドレス(メイン)'"
        >

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

以上です。

Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Compare
Wishlist 0
Open wishlist page Continue shopping