Alpine.jsおよびiodine.jsを使用した軽量フォーム検証

最新のユーザーは、フォーム検証中に即時のフィードバックを期待しています。この記事では、2つの軽量JavaScriptライブラリであるAlpine.jsとiodine.jsが、最小限のオーバーヘッドで非常にインタラクティブなフォームを作成する方法を示しています。これらのライブラリは、重いJavaScriptビルドツールの複雑さを回避します。

Alpine.jsとiodine.jsのAPIを紹介し、徐々に強化された検証でフォームを構築します。最終フォームは、無効な入力に関するインスタントフィードバックを提供します。

Alpine.jsとiodine.jsの紹介

Alpine.jsはCDNホストのライブラリであり、ビルドステップや依存関係を必要としません。その簡潔なドキュメントと小さなサイズ（8.36 kbの模倣とGzipped）により、非常に効率的になります。これは、より大きなフレームワークの競合他社ではなく、VUEのようなテンプレートに属するJQuery/Vanilla JavaScriptの代替品として説明されています。

iodine.jsは、フロントエンドフレームワークと簡単に統合できるように設計されたマイクロフォーム検証ライブラリです。入力フィールドごとに複数のルールを許可することにより、検証を簡素化し、明確なエラーメッセージを提供します。

IODINE.jsの動作：基本的な例

これは、cdnを介して取得したiodine.jsを使用した基本的なクライアント側の検証例です。

 // ...（iodine.js cdnリンクはこちらに行きます）...

または、Skypackを使用してください：

 「https://cdn.skypack.dev/@kingshott/iodine」からkingshottiodineをインポートします。

Skypackからインポートするときは、 kingshottIodineを使用することを忘れないでください。ヨウ素はis指定されたルールに対する入力の妥当性をメソッドチェックします。それ以外の場合は、有効な入力またはエラー文字列に対してtrueを返します。

HTMLデータ属性を使用して、各入力の検証ルールを保存します。

<input type="text" name="username" data-rules='["required", "minLength:5"]'>

Vanilla JavaScriptは検証を処理します：

 form = document.getElementById（ "form"）;
入力= [... form.queryselectorall（ "input [data-rules]"）]];

function onsubmit（event）{
  inputs.map（（input）=> {
    if（iodine.is（input.value、json.parse（input.dataset.rules））！== true）{
      event.preventdefault（）;
      input.classlist.add（ "Invalid"）;
    }
  }）;
}
form.addeventlistener（ "submit"、onsubmit）;

この基本的な例には、使いやすさがありません。エラーメッセージは提供されず、動的に更新しません。

Alpine.jsでの強化

Alpine.jsはユーザーエクスペリエンスを改善します。ぼかしまたは入力の変更について検証し、入力を中断することなくインスタントフィードバックを提供します。 Alpine.jsはCDNを介して含まれています。

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v3.x.x/dist/alpine.min.js" defer></script>

または、Skypack経由：

 「https://cdn.skypack.dev/alpinejs」からアルパインをインポートします。

x-dataを使用して、Alpine.jsコンポーネント内の入力状態（ぼやけたステータスとエラーメッセージ）を管理します。関数はコンポーネントデータを定義します。

 alpine.data（ "form"、form）;
alpine.start（）;

function form（）{
  戻る {
    ユーザー名：{errormessage： ''、Blurred：false}、
    電子メール：{errormessage： ''、Blurred：false}、
    パスワード：{errormessage： ''、Blurred：false}、
    PasswordConf：{errormessage： ''、Blurred：false}、
    // ...（機能が後で追加されます）...
  };
}

x-bind:class条件付きで「無効」クラスを追加します。

<input type="text" name="username" x-bind:class="{ 'invalid': username.errorMessage && username.blurred }" ...>

入力の変更に反応します

イベントリスナーはコンポーネントの状態を更新します：

 // ...「フォーム」関数内...
Blur：function（event）{
  let ele = event.target;
  この[ele.name] .blurred = true;
  ルール= json.parse（ele.dataset.rules）;
  この[ELE.NAME] .ERRORMESSAGE = this.getErrorMessage（ele.value、rules）;
}、
入力：function（event）{
  let ele = event.target;
  ルール= json.parse（ele.dataset.rules）;
  この[ELE.NAME] .ERRORMESSAGE = this.getErrorMessage（ele.value、rules）;
}、
GetErrorMessage：function（value、rules）{
  isvalid = iodine.is（value、rules）;
  if（isvalid！== true）{
    IODINE.GETERRORMESSAGE（isValid）を返します。
  }
  戻る '';
}、
// ...

エラーメッセージはx-showとx-textを使用して表示されます。

<p x-show="username.errorMessage && username.blurred" x-text="username.errorMessage"></p>

@submitイベントハンドラー（Alpineコンポーネント内）はフォームの提出を処理します。

送信：function（event）{
  入力= [... this。$ el.queryselectorall（ "input [data-rules]"）]];
  inputs.map（（input）=> {
    if（iodine.is（input.value、json.parse（input.dataset.rules））！== true）{
      event.preventdefault（）;
    }
  }）;
}

サーバー側のエラー処理

サーバー側のエラーを処理するために、それらをdata-server-errors属性に保存し、 x-initを使用してコンポーネントの状態に登録します。

<input type="text" name="username" data-server-errors='["Username already exists"]' ...>

高山コンポーネントのinit関数はこれを処理します。

 init：function（）{
  this.inputelements = [... this。$ el.queryselectorall（ "input [data-rules]"）];
  this.initdomdata（）;
}、
initdomdata：function（）{
  this.inputelements.map（（ele）=> {
    この[ELE.NAME] = {
      サーバーエラー：json.parse（ele.dataset.servererrors）、
      ぼやけた：偽
    };
  }）;
}

getErrorMessage関数は、サーバーエラーを優先するために更新されます。

 geterrormessage：function（ele）{
  if（this [ele.name] .servererrors.length> 0）{
    これを返します[ELE.NAME] .SERVERERRORS [0];
  }
  // ...（関数の残りの部分はほぼ同じままです）...
}

相互依存の入力を処理します

相互依存の入力（例：パスワード確認）については、すべての入力変更に関するすべてのエラーメッセージを更新します。ヨウ素のaddRuleメソッドは、カスタムルールを作成します。

 iodine.addrule（
  「MatchingPassWord」、
  value => value === document.getElementById（ "Password"）。値
）;
iodine.messages.matchingpassword = "パスワードの確認は、パスワードを一致させる必要があります";

updateErrorMessages関数はこれを処理します：

 updateerrormessages：function（）{
  this.inputelements.map（（ele）=> {
    この[ELE.NAME] .ERRORMESSAGE = this.getErrormessage（ele）;
  }）;
}、

getErrorMessage関数は、入力がぼやけている場合にのみメッセージを返すように洗練されています。

 geterrormessage：function（ele）{
  // ...（サーバーエラーチェック）...
  const error = iodine.is（ele.value、json.parse（ele.dataset.rules））;
  if（error！== true && this [ele.name] .blurred）{
    Iodine.getErrormessage（エラー）を返します。
  }
  戻る "";
}

イベントリスナーは、 blurの代わりにfocusoutを使用して、親フォーム要素に移動されます。

...

最後に、視覚的なフィードバックのためにフェードイントランジションが追加されます。

<p x-show="username.errorMessage" x-text="username.errorMessage" x-transition:enter=""></p>

これにより、反応性があり、再利用可能で効率的なフォーム検証ソリューションが得られます。提供されたform関数は、それに応じてHTML属性を構成することにより、複数のフォームで再利用できます。

以上がAlpine.jsおよびiodine.jsを使用した軽量フォーム検証の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。