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