こんにちは、フロントエンドエンジニアのてりーです。
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の勉強用に買った本を思い出に添付。