ユーザーとつながり、必要なデータを保存できるフォームがなければ、インタラクティブなウェブサイトやプログラムは不可能です。確かに有効なユーザー入力は必要ですが、ユーザーを飽きさせない方法で入力する必要があります。
優れた UX デザインを使用してフォームの使いやすさを向上させることはできますが、HTML5 は制限検証のためのネイティブ メカニズムも提供しており、これによりフロントエンドで入力エラーを検出できます。
この記事では、ブラウザーによって提供される限定的な検証に焦点を当て、フロントエンド開発者が HTML5 を使用して有効なユーザー入力を取得する方法について説明します。
フロントエンドの入力検証が必要な理由
入力検証を使用する目的は主に 2 つあります。私たちが必要とするものは:
1. 実用的
必要なのは利用可能なデータです。ユーザーは実用的なデータを正しい形式で送信する必要があります。たとえば、200年前に生まれた人が今生きているということはあり得ません。このデータを初めて取得したときは、非常に興味深いと感じるかもしれません。しかし、しばらくすると、そのような無効なデータには飽きてしまい、データベースが大量の無効なデータで溢れてしまいます。
2.セキュリティ
ここで言うセキュリティとは、ユーザーの意図的な行動であろうと、意図しない行動であろうと、悪意のあるコンテンツの挿入を防ぐことです。
データの実用性（妥当なデータの取得）はユーザーの意識に頼るしかなく、バックエンドチームはあまり助けてくれません。ただし、データのセキュリティを確保するには、フロントエンド チームとバックエンド チーム間の緊密な連携が必要です。
フロントエンド開発者がユーザーが入力したデータを適切に検証できれば、バックエンドチームが直面する問題の合計ははるかに少なくなります。ハッカーがサイトを攻撃する場合、最も一般的な方法の 1 つは、追加データを送信するか、間違った形式でデータを送信することです。開発者はこのようなセキュリティ ホールを完全にブロックすることができ、それをフロントエンドで実行できます。
フロントエンドの入力検証では、ユーザーが入力したデータに合理的な制限を追加することが私たちの仕事です。 HTML5の制限検証機能はそのようなツールを提供します。
HTML5の制限付き検証
HTML5が登場する前は、フロントエンド開発者はユーザー入力を検証するためにJavaScriptしか使用できませんでしたが、このプロセスは開発者にとって苦痛であり、さまざまな間違いが頻繁に発生しました。ユーザー側のフォーム検証を改善するために、HTML5 では、最新のブラウザーで実行してユーザーが送信したデータの有効性をチェックできる制限付き検証アルゴリズムが導入されています。
データを評価するとき、このアルゴリズムは、、
