v8nを使ってみる

フォームなどのバリデーション処理を実装できるライブラリ「v8n」を使ってみます。

設定方法

まずライブラリのインストールですが、今回は簡単にCDNから読み込みます。

<script src="https://unpkg.com/v8n/dist/v8n.min.js"></script>

例として文字列かどうかのバリデーションを試してみます。

const sample = 'My string!';
const isValid = v8n()
  .string()
  .test(sample);
console.log(isValid); // true

v8n()にバリデーションのルールをつないでいき、最後にtest()でバリデーションをかける値を指定します。
v8nのデモページ

先ほどと同じ文字列のバリデーションで、先頭の文字と末尾の文字のチェックを追加してみます。

const sample = 'Hello';
const isValid = v8n()
  .string()
  .first('H')
  .last('o')
  .test(sample);
console.log(isValid); // true

文字列で先頭が「H」、末尾が「o」かどうかのバリデーションになりました。
v8nのデモページ2

test()ではなくtestAll()を使うことで、バリデーションの結果を真偽値ではなく、配列で受け取ることもできます。

const validator = v8n()
  .string()
  .first('H')
  .last('o');

const sample = 'Hello';
const isValid = validator.testAll(sample);
console.log(isValid);

const sample2 = 'Hey';
const isValid2 = validator.testAll(sample2);
console.log(isValid2);

バリデーションで問題のあった部分が配列に入るので、個別にエラーメッセージを出したい場合などに使用できます。
v8nのデモページ3

try catchを使った形でのバリデーションもできます。

const validator = v8n()
  .string()
  .first('H')
  .last('o');

try {
  const sample = 'Hello';
  validator.check(sample);
} catch (exception) {
  console.log(exception.rule);
}

try {
  const sample2 = 'Hey';
  validator.check(sample2);
} catch (exception) {
  console.log(exception.rule);
}

test()の代わりにcheck()を使用します。
v8nのデモページ4

独自にバリデーションの作成もできます。

v8n.extend({
  myCustomRule: expected => {
    return value => {
      console.log(value, expected);
      return value === expected;
    };
  }
});

const sample = 'string';
const isValid = v8n()
  .myCustomRule('customRuleOption')
  .test(sample);
console.log(isValid); // false

v8n.extend()を使って設定して、返り値は真偽値にする必要があります。
v8nのデモページ5

ルール

デフォルトで用意されているバリデーションルールを見てみます。
ルールのデモページ

修飾子