くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > Nuxt.js > v8nでカスタムVeeValidateやったら楽だった

v8nでカスタムVeeValidateやったら楽だった

Nuxt.js Vue.js Validate

これの続き。

www.memory-lovers.blog

前回導入したVeeValidateにカスタムバリデーションを追加したいと思い、
いろいろ調べたらv8nが便利そうだったので、使ってみた。

サンプルはTwitterIDのバリデーションの例

インストール

$ npm install --save v8n

カスタムバリデーションを追加する

plugins/vee-validate.tsに追記していく
バリデーションの内容は、この記事から引用。すてきすぎる。。

import Vue from "vue";
import VeeValidate, { Validator } from "vee-validate";
import ja from "vee-validate/dist/locale/ja";
import v8n from "v8n";

Vue.use(VeeValidate, { inject: false });

// TwitterIDかの検証
const validateTwitterId = (twitterId: string) =>
  v8n()
    .not.null() // 値が空じゃないか
    .string() // 文字列型
    .first("@") // '@' から始まっているか
    .length(5, 16) // @を含む5文字以上16文字以内に収まっているかどうか *twitterの使用上は 4-15文字
    .test(twitterId); // 値のテスト

Validator.extend("twitterId", {
  getMessage: field => "The " + field + " value is not truthy.",
  validate: value => validateTwitterId(value)
});

// メッセージをjaに変更
ja.messages.twitterId = (field: string) => `${field}の形式が正しくありません。`;
Validator.localize("ja", ja);

カスタムバリデーションを追加するときのポイントは、以下の2つ

  1. カスタムバリデーションは、Validator.extendで追加
  2. jaのメッセージは、ja.messages.<validation-name>で設定

これだけ！以上！！

参考にしたサイト様