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

ルール

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

pattern() 正規表現で指定した形でのバリデーション。
equal() 指定した値と等しいかどうかでのバリデーション。
「==」を用いているので厳密ではない。
exact() 指定した値と厳密に一致するかどうかでのバリデーション。
string() 文字列かどうかのバリデーション。
number() 数値かどうかのバリデーション。
デフォルトだとNaNやInfinityの場合もtrueを返すが、引数にfalseを設定することで無効にできる。
numeric() 数字かどうかのバリデーション。
boolean() 真偽値かどうかのバリデーション。
undefined() undefinedかどうかのバリデーション。
null() nullかどうかのバリデーション。
array() 配列かどうかのバリデーション。
object() オブジェクトかどうかのバリデーション。
lowercase() 全て小文字かどうかのバリデーション。
uppercase() 全て大文字かどうかのバリデーション。
vowel() 全て母音かどうかのバリデーション。
consonant() 全て子音かどうかのバリデーション。
first() 先頭の文字、もしくは配列の最初の項目かどうかのバリデーション。
last() 末尾の文字、もしくは配列の最後の項目かどうかのバリデーション。
empty() 空かどうかのバリデーション。
length() 指定した長さかどうかのバリデーション。
minLength() 指定した長さ以上であるかどうかのバリデーション。
maxLength() 指定した長さ以下であるかどうかのバリデーション。
negative() 負の数かどうかのバリデーション。
positive() 正の数かどうかのバリデーション。
between() 指定した範囲内かどうかのバリデーション。
range()の場合も同様。
lessThan() 指定した値未満かどうかのバリデーション。
lessThanOrEqual() 指定した値以下かどうかのバリデーション。
greaterThan() 指定した値を超えるかどうかのバリデーション。
greaterThanOrEqual() 指定した値以上かどうかのバリデーション。
even() 偶数かどうかのバリデーション。
odd() 奇数かどうかのバリデーション。
includes() 指定した値を含む文字列、もしくは配列かどうかのバリデーション。
integer() 整数かどうかのバリデーション。

修飾子

not notに続くルールを反転してバリデーションを行う。
some 指定した配列内の1つ以上がバリデーションに合格している場合、trueを返す。
every 指定した配列内の全ての項目がバリデーションに合格している場合、trueを返す。

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2023年12月
 12
3456789
10111213141516
17181920212223
24252627282930
31