HTML5制約検証のイントロ

インタラクティブなWebサイトやアプリケーションは、私たちに可能にするフォームがなければ想像できません。 ユーザーとつながる, と データを入手する 円滑な取引を確保するために必要なのです。必要です 有効なユーザー入力, しかし、我々はそれを次のようにして取得する必要があります。 イライラしない 私たちのユーザーが多すぎる.

スマートに選択されたUXデザインパターンを使ってフォームの使いやすさを向上させることができますが、HTML 5には制約検証のためのネイティブメカニズムもあります。 フロントエンドで入力エラーを捉える.

この記事では、焦点を当てます。 ブラウザ提供の制約検証, そして、フロントエンド開発者がどのようにできるかを調べてください。 HTML5を使用した安全な有効なユーザー入力.

フロントエンドの入力検証が必要な理由

入力検証 2つの主な目標があります。取得するコンテンツは以下のとおりです。

1.便利な

必要です 使えるデータ. 私たちは人々を入らせる必要があります 正しい形式の現実的なデータ. たとえば、今日生きている人は200年前に生まれませんでした。このようなデータを取得することは、最初は面白そうに見えるかもしれませんが、長期的には厄介なことであり、データベースに無用なデータを取り込むことになります。.

2.安全

セキュリティについて言及するとき、これは我々がする必要があることを意味します 悪意のあるコンテンツの挿入を防ぐ - 故意か偶然か.

有用性（妥当なデータを取得する）を達成することができます クライアント側のみ, バックエンドチームはこれをあまりやり過ぎることはできません。達成する セキュリティ, フロントエンドとバックエンドの開発者は協力する必要があります。.

フロントエンド開発者がクライアント側で入力を適切に検証すると、 バックエンドチームははるかに少ない脆弱性に対処しなければならないでしょう. ハッキング（サイト）を伴うことが多い 追加データを送信する, または 間違った形式のデータ. 開発者はこのようなセキュリティホールと戦うことができ、フロントエンドからうまく戦うことができます。.

たとえば、このPHPセキュリティガイドでは、クライアント側でできることすべてをチェックすることを推奨しています。彼らは、次のような多くの例を挙げてフロントエンドの入力検証の重要性を強調しています。

「入力検証は、極端に制限された値、たとえば整数、英数字文字列、またはHTTP URLである必要がある場合などに最も効果的に機能します。」

フロントエンドの入力検証では、私たちの仕事は 合理的な制約を課す ユーザー入力HTML5の制約検証機能は私たちにそうする手段を提供します.

HTML5の制約検証

HTML 5以前は、フロントエンド開発者は JavaScriptでユーザー入力を検証する, これは面倒でエラーが発生しやすいプロセスでした。クライアントサイドのフォーム検証を改善するために、HTML5は 制約検証 最近のブラウザで動作するアルゴリズム 送信された入力の有効性を確認します.

評価を行うために、アルゴリズムは次のものを使用します。 入力要素の検証関連の属性, といった , </code>, そして <code><select></code>. ブラウザで制約の検証がどのように段階的に行われるかを知りたい場合は、このWhatWGドキュメントをご覧ください。.</p> <p>HTML5の制約検証機能のおかげで、私たちはすべてを実行することができます <strong>標準入力検証タスク</strong> クライアント側 <strong>JavaScriptなし、HTML5のみ</strong>.</p> <p>より複雑な検証関連のタスクを実行するために、HTML 5では次のものが提供されています。 <strong>制約検証JavaScript API</strong> カスタム検証スクリプトを設定するために使用できます.</p> <h4>セマンティック入力タイプで検証する</h4> <p>HTML5が紹介しました <strong>意味入力タイプ</strong> それは - ユーザエージェントのための要素の意味を示すこととは別に - も使用することができます <strong>ユーザー入力を検証する</strong> ユーザーを特定の入力形式に制限する.</p> <p>HTML5以前にすでに存在していた入力型の他に（<code>テキスト</code>, <code>パスワード</code>, <code>提出する</code>, <code>リセット</code>, <code>無線</code>, <code>チェックボックス</code>, <code>ボタン</code>, <code>隠された</code>）、私達はまた次を使用してもいいです <strong>セマンティックHTML5入力タイプ</strong>： <code>Eメール</code>,<code>電話</code>,<code>URL</code>,<code>数</code>,<code>時間</code>,<code>日付</code>,<code>日付時刻</code>,<code>日時ローカル</code>, <code>月</code>,<code>週間</code>, <code>範囲</code>, <code>サーチ</code>,<code>色</code>.</p> <p>HTML5の入力タイプは、古いブラウザでは安全に使用できます。 <code><input type="text"></code> サポートしていないブラウザのフィールド.</p> <p>ユーザーが間違った入力タイプを入力したときに何が起こるか見てみましょう。次のコードでEメール入力フィールドを作成したとします。</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="youremail">あなたのEメール：</label> <input type="email" name="email"> <input type="submit" value="Submit"> </form> </pre> <p>ユーザーが電子メール形式を使用しない文字列を入力すると、制約検証アルゴリズム <strong>フォームを送信しない</strong>, そして <strong>エラーメッセージを返す</strong>：</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.jpg"></figure><p>同じ規則が他の入力タイプにも適用されます。例えば、 <code>type = "url"</code> ユーザーはURL形式に従う入力のみを送信できます（次のようなプロトコルで始まります）。 <code>http：//</code> または <code>ftp：//</code>）.</p> <p>一部の入力タイプは、 <strong>ユーザーが間違った入力フォーマットを入力することすら許可しません</strong>, 例えば <code>色</code> そして <code>範囲</code>.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="bgcol">背景色：</label> <input type="color" name="color"> <input type="submit" value="Submit"> </form> </pre> <p>私達が使用すれば <code>色</code> ユーザーがカラーピッカーから色を選択するかデフォルトの黒のままにするかのどちらかに制限されている入力タイプ。入力フィールドは <strong>設計による制約</strong>, そのため、ユーザーエラーの可能性はあまりありません。.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_2.jpg"></figure><p>適切な場合は、使用することを検討する価値があります <code><select></code> これらの設計制約の入力タイプと同様に機能するHTMLタグ。ユーザーがドロップダウンリストから選択することを可能にします.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="favfruit">あなたの好きな果物：</label> <select name="fruit"> <option value="apple">林檎</option> <option value="pear">梨</option> <option value="orange">オレンジ</option> <option value="raspberry">ラズベリー</option> </select> <input type="submit" value="Submit"> </form> </pre> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_3.jpg"></figure><h4>HTML5の検証属性を使う</h4> <p>セマンティック入力型を使用すると、ユーザーが送信を許可される内容に一定の制約が設定されますが、多くの場合、もう少し先に進みたいと思います。これが <strong>検証関連の属性</strong> の <code><input></code> タグは私たちを助けることができる.</p> <p>検証関連の属性は特定の入力タイプに属します（これらは使用できません）。 <em>すべて</em> さらに制約を課すタイプ）.</p> <h5>1. <code>必須</code> 必ず有効な入力を得るため</h5> <p>の <code>必須</code> attributeは最も有名なHTML検証属性です。それは <strong>ブール属性</strong> それはそれを意味します <strong>値をとらない</strong>, 私たちはただそれを内部に配置するだけです。 <code><input></code> 使用したい場合はtag：</p> <pre name="code"> <input type="email" name="email" required> </pre> <p>ユーザーが必須の入力フィールドに値を入力するのを忘れた場合、ブラウザは <strong>エラーメッセージを返す</strong> それは彼らに分野を埋めるように警告します、そして彼らは <strong>フォームを送信できません</strong> 彼らが有効な入力を提供するまで。それが常に重要なのです。 <strong>視覚的に印を付ける</strong> ユーザーへの必須フィールド.</p> <p>の <code>必須</code> 属性は <strong>以下の入力タイプと併用</strong>： <code>テキスト</code>, <code>サーチ</code>, <code>URL</code>, <code>電話</code>, <code>Eメール</code>, <code>パスワード</code>, <code>日付</code>, <code>日付時刻</code>, <code>日時ローカル</code>, <code>月</code>, <code>週間</code>,<code>時間</code>, <code>数</code>, <code>チェックボックス</code>, <code>無線</code>, <code>ファイル</code>, とプラス <code><textarea></code>そして <code><select></code> HTMLタグ.</p> <h5>2. <code>分</code>, <code>最大</code> そして <code>ステップ</code> 番号検証用</h5> <p>の <code>分</code>, <code>最大</code> そして <code>ステップ</code> 属性は私たちを可能にします <strong>数値入力フィールドに制約を課す</strong>. 彼らは一緒に使用することができます <code>範囲</code>, <code>数</code>, <code>日付</code>, <code>月</code>, <code>週間</code>, <code>日付時刻</code>, <code>日時ローカル</code>, そして <code>時間</code> 入力タイプ.</p> <p>の <code>分</code> そして <code>最大</code> 属性は簡単にするための素晴らしい方法を提供します。 <strong>不当なデータを除外する</strong>. たとえば、次の例では、ユーザーに18歳から120歳までの年齢を送信するように強制しています。.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourage">あなたの年齢：</label> <input type="number" name="age" min="18" max="120"> <input type="submit" value="Submit"> </form> </pre> <p>制約検証アルゴリズムが次の値より小さいユーザー入力にぶつかったとき <code>分</code>, またはより大きい <code>最大</code> 値、バックエンドに到達できないようにし、エラーメッセージを返す.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p>の <code>ステップ</code> 属性 <strong>数値の間隔を指定します</strong> 数値入力フィールドの有効値間たとえば、うるう年からのみユーザーに選択させたい場合は、 <code>step = "4"</code> フィールドに対する属性。以下の例では、 <code>数</code> ないので入力タイプ <code>type = "年"</code> HTML5では.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourleapyear">あなたの好きな閏年：</label> <input type="number" name="leapyear" min="1972" max="2016" step="4"> <input type="submit" value="Submit"> </form> </pre> <p>事前設定された制約により、ユーザーは1972年から2016年までのうるう年から選択することができます。 <code>数</code> 入力方式。入力フィールドに手動で値を入力することもできますが、それが制約を満たさない場合、ブラウザはエラーメッセージを返します。.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.gif"></figure><h5>3. <code>最大長</code> テキスト長検証用</h5> <p>の <code>最大長</code> 属性はそれを可能にします <strong>最大文字長を設定する</strong> テキスト入力フィールド用。それは一緒に使用することができます <code>テキスト</code>, <code>サーチ</code>, <code>URL</code>, <code>電話</code>, <code>Eメール</code> そして <code>パスワード</code> 入力タイプ、および <code><textarea></code> HTMLタグ.</p> <p>の <code>最大長</code> 属性は、特定の文字数を超えることができない電話番号フィールドや、ユーザーが特定の長さを超えて記述したくない連絡フォームに最適なソリューションです。.</p> <p>以下のコードスニペットは後者の例を示しています、それは500文字にユーザメッセージを制限します. </p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourmsg">メッセージ（最大500文字）：</label> <textarea name="msg" cols="25" rows="4" maxlength="500">

の 最大長 属性 エラーメッセージを返さない, しかし、ブラウザは単に指定された文字数以上の文字をユーザに入力させません。それがそれが重要である理由です 制約についてユーザーに通知する, そうでなければ、なぜ彼らはタイピングを続けることができないのか理解できないでしょう。.

 
 * あなたのパスワード：