便利なのが登場！フォームのバリデーションをシンプルな記述で実装できる超軽量JavaScriptライブラリ -v8n
Post on:2018年10月24日
sponsors
Webサイトやスマホアプリのどの部分にでもフォームに入力された値を検証するバリデーションを簡単に実装できる、わずか2.29kBの超軽量ライブラリを紹介します。
バリデーションでよく使用されるルールもデフォルトで30個以上用意されており、ルールをカスタマイズして利用するのも簡単です。
v8nの特徴
v8nの名称は、「validation」の「v」と「n」の間に正確に8文字あるという意味です。
-
- 流暢でチェーン化可能なAPI
- チェーン化可能なAPIを使用して、フォームの検証を簡単に作成できます。
-
- 有用な標準検証ルール
- フォームの検証でよく使用される30個以上のルールが用意されています。
-
- カスタマイズ性
- フォームの検証用ルールは、簡単にカスタマイズできます。
-
- 非同期検証をサポート
- バックエンドでの検証のように時間のかかるルールがある場合は、非同期検証を使用できます。
-
- 再利用性に優れた設計
- JavaScriptのモジュールのように簡単に再利用できます。
-
- ライセンス
- MITライセンスで、個人でも商用でも無料で利用できます。
v8nのドキュメント
v8nのドキュメントは、下記ページから利用できます。
v8nの使い方
外部ファイル
当スクリプトを外部ファイルとして記述します。
|
1 |
<script src="https://unpkg.com/v8n/dist/v8n.min.js"></script> |
チェーン化可能なAPI
フォームの検証ルールはチェーン化して記述することができ、非常に簡単です。
|
1 2 3 4 5 6 |
v8n() .string() .minLength(5) .first("H") .last("o") .test("Hello"); // true |
流暢な記述
検証ルールを組み合わせて、複雑な検証を非常に簡単にかつ流暢に作成できます。
|
1 2 3 4 5 |
v8n() .array() .every.number() .not.some.negative() .test([1, 2, -3]); // false - no negative please! |
英文のような感じで利用できます。
|
1 2 3 4 5 6 7 |
v8n() .some.not.uppercase() // 一部の文字が大文字ではない .test("Hello"); // true v8n() .not.some.uppercase() // すべての文字が大文字ではない .test("Hello"); // false |
上記の2つは修飾子の順序を変更しただけですが、検証ルールは異なります。このように直観的な記述をできるのがv8nの特徴です。
カスタマイズ性
検証用の独自のルールを非常に直観的な方法で作成します。
|
1 2 3 4 5 |
function foo() { return value => value === "bar"; } v8n.extend({ foo }); |
v8nではビルトインと同じように扱います。
|
1 2 3 4 |
v8n() .string() .foo() .test("bar"); // true |
再利用性
JavaScriptのモジュールのように検証ルールをエクスポートできます。
|
1 2 3 4 5 6 |
import v8n from "v8n"; export default v8n() .number() .between(50, 100) .not.even(); |
モジュール化したJavaScriptは、必要な場所で簡単に再利用できます。
|
1 2 3 |
import specialNumber from "../specialNumber"; specialNumber.test(63); // true |
データの種類
v8nを使用してプリミティブ、配列、オブジェクトなど、そのタイプに関係なくデータを検証できます。さらに、これらを一緒に使用することもできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// numbers v8n() .number() .between(5, 10) .test(7); //true // strings v8n() .string() .minLength(3) .test("foo"); // true // arrays v8n() .array() .every.even() .test([2, 4, 6]); // true // objects const myData = { id: "fe03" }; v8n() .schema({ id: v8n().string() }) .test(myData); // true |
検証の種類
ブーリアン値ベースで単純な検証を行えます。
|
1 2 3 4 |
v8n() .string() .first("H") .test("Hello"); // true |
例外処理ベースの検証。
|
1 2 3 4 5 6 7 8 |
try { v8n() .string() .first("b") .check("foo"); } catch (ex) { console.log(ex.rule.name); // first } |
非同期検証
バックエンドでの検証のように時間のかかるルールがある場合は、非同期検証を使用することもできます。
|
1 2 3 4 5 6 7 8 9 |
v8n() .somAsyncRule() .testAsync("foo") // returns a Promise .then(result => { /* valid! */ }) .catch(ex => { /* invalid! */ }); |
sponsors
