簡単にバリデーション処理を書けるJSライブラリ「v8n」

javascript

簡単にバリデーション処理を書けるJSライブラリ「v8n」

2021年02月02日 12:00　

簡単にバリデーション処理を書けるJSライブラリ「v8n」

こんにちは！社員Kです。

本日は、簡単にバリデーション処理を書けるJSライブラリ「v8n」のご紹介です。
お問い合わせフォームやアンケートフォームなど入力した内容の検証に利用します。

WordPressのようなCMSを使う場合は、お問い合わせフォームのプラグインなどにバリデーション機能は付属しているものなので、あまり使う機会は多くないかもしれませんが、
既存のCMSを使わないホームページ制作や独自システムの開発などでは、非常に便利なライブラリになると思います。

v8nとは
v8nの使用方法

v8nとは

v8nは、あらゆるコンテキストで使用できる最も流暢でシンプルな検証ライブラリを目指しています。APIは美しく読みやすく、アプリのどの部分でも複雑な検証を簡単に作成できます。便利なデフォルトの検証方法はたくさんありますが、独自の流暢なルールをv8nに追加して、アプリ内のどこでも使用するのは簡単です。v8n

v8nの使用方法

v8nの最も簡単な利用方法はCDNから読み込む方法です。

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

型の検証

v8n()
  .string()
  .test("My string!"); //true

メールアドレスの検証

let email = "test@example.com";

v8n()
  .pattern(/[^\s@]+@[^\s@]+\.[^\s@]+/) // eメール用の正規表現
  .test(email); // true

複数のルールを連結も可能

v8n()
  .string()
  .first("H")
  .last("o")
  .test("Hello"); //true

独自のルールを追加

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

v8n()
  .myCustomRule("bar")
  .test("foo"); // False

その他の組み込みルール

最初から用意されている検証ルールの一覧はこちらから確認できます。
https://imbrn.github.io/v8n/api/#built-in-rules

この記事を書いた人

社員K

福岡でWebプログラマー・フロントエンドエンジニアとして10年目。まだまだ勉強することが沢山あるなぁと最近良く思います。日本語には自信があります。すぐに効くダイエット情報募集中！

簡単にバリデーション処理を書けるJSライブラリ「v8n」