HTML5制限検証の詳細説明

ユーザーとつながり、必要なデータを保存できるフォームがなければ、インタラクティブなウェブサイトやプログラムは不可能です。確かに有効なユーザー入力は必要ですが、ユーザーを飽きさせない方法で入力する必要があります。

優れた UX デザインを使用してフォームの使いやすさを向上させることはできますが、HTML5 は制限検証のためのネイティブ メカニズムも提供しており、これによりフロントエンドで入力エラーを検出できます。

この記事では、ブラウザーによって提供される限定的な検証に焦点を当て、フロントエンド開発者が HTML5 を使用して有効なユーザー入力を取得する方法について説明します。

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

入力検証を使用する目的は主に 2 つあります。私たちが必要とするものは:

1. 実用的

必要なのは利用可能なデータです。ユーザーは実用的なデータを正しい形式で送信する必要があります。たとえば、200年前に生まれた人が今生きているということはあり得ません。このデータを初めて取得したときは、非常に興味深いと感じるかもしれません。しかし、しばらくすると、そのような無効なデータには飽きてしまい、データベースが大量の無効なデータで溢れてしまいます。

2.セキュリティ

ここで言うセキュリティとは、ユーザーの意図的な行動であろうと、意図しない行動であろうと、悪意のあるコンテンツの挿入を防ぐことです。

データの実用性（妥当なデータの取得）はユーザーの意識に頼るしかなく、バックエンドチームはあまり助けてくれません。ただし、データのセキュリティを確保するには、フロントエンド チームとバックエンド チーム間の緊密な連携が必要です。

フロントエンド開発者がユーザーが入力したデータを適切に検証できれば、バックエンドチームが直面する問題の合計ははるかに少なくなります。ハッカーがサイトを攻撃する場合、最も一般的な方法の 1 つは、追加データを送信するか、間違った形式でデータを送信することです。開発者はこのようなセキュリティ ホールを完全にブロックすることができ、それをフロントエンドで実行できます。

フロントエンドの入力検証では、ユーザーが入力したデータに合理的な制限を追加することが私たちの仕事です。 HTML5の制限検証機能はそのようなツールを提供します。

HTML5の制限付き検証

HTML5が登場する前は、フロントエンド開発者はユーザー入力を検証するためにJavaScriptしか使用できませんでしたが、このプロセスは開発者にとって苦痛であり、さまざまな間違いが頻繁に発生しました。ユーザー側のフォーム検証を改善するために、HTML5 では、最新のブラウザーで実行してユーザーが送信したデータの有効性をチェックできる制限付き検証アルゴリズムが導入されています。

データを評価するとき、このアルゴリズムは、、、<select> などの入力要素の検証関連の属性を使用します。 </select>

HTML5の制限された検証機能のおかげで、ついにユーザーデータの送信を検証する際にJavaScriptを取り除くことができました。

より複雑な検証関連タスクを実行するために、HTML5 は制限付き検証 JavaScript API を提供しており、これを使用してパーソナライズされた検証スクリプトを作成できます。

検証にセマンティック入力タイプを使用する

HTML5 では、ユーザーを特定の入力フォームに制限することでユーザー入力を検証するために使用できるセマンティック入力タイプを導入しています。

これまでの入力タイプ（テキスト、パスワード、送信、リセット、ラジオ、チェックボックス、ボタンなど）に加えて、 非表示）、html5は新しいセマンティック入力タイプも追加しました：

メール、

tel、

url、

番号、

時刻、日付、

dateTime-local、

、

、

、

、

、

,

,

,

,

, week, range, search,

color.

それでは、ユーザーが間違ったデータ型を入力した場合に何が起こるかを見てみましょう。次のコードを使用して電子メール入力ボックスを作成しました:

<form name="form" action="#" method="post">

   <label for="youremail">Your Email:</label>

   <input type="email" name="email" id="youremail">

   <input type="submit" value="Submit">

 </form>

🎜 ユーザーが電子メール形式に準拠していない文字列を入力すると、制限された検証アルゴリズムによりフォームは送信されず、エラー メッセージが返されます: 🎜 🎜 🎜🎜🎜

　　这个规则也适用于其他的input类型，例如如果你使用了type=“url”，用户将智能提交URL格式的字符串(以协议开头，例如http://或是ftp://)。

　　还有一些input类型使用了特殊的设计，它们甚至不允许用户输入错误的输入格式，例如color和range。

 <form name="form" action="#" method="post">

  <label for="bgcol">Background Color:</label>

  <input type="color" name="color" id="bgcol">

  <input type="submit" value="Submit">

</form>

　　如果使用了color这个input类型，用户只能在颜色选择器中选择颜色，或者使用默认的黑色。由于这个输入框在最初设计时就添加了严格的限制，因此用户基本不可能输入错误数据。

　　在合适的时候，你也可以考虑使用HTML的标签，它的作用与上面那个input类型相似；它会让用户在下拉菜单中进行选择。

<form name="form" action="#" method="post">

  <label for="favfruit">Your Favourite Fruit:</label>

  <select name="fruit" id="favfruit">

    <option value="apple">Apple</option>

    <option value="pear">Pear</option>

    <option value="orange">Orange</option>

    <option value="raspberry">Raspberry</option>

  </select>

  <input type="submit" value="Submit">

</form>

　　使用HTML的验证属性

　　使用语义input类型，可以限制用户所提交的数据类型，但是在很多时候，这样还不够。在这个时候，标签的验证相关属性可以为我们提供帮助。

　　验证相关属性应用于某些特定的input类型(并非所有类型都可以使用)，这些属性可以设定更加严格的限制。

　　1. 强制用户必须提交有效数据：

　　required是HTML中最广为人知的验证属性。它是一种布尔值属性，也就是说，它不需要包含任何值，在需要的时候，我们只需要把它放我们只需要把它放在标签里就好了。

　　

　　当我们给一个输入框赋予required属性之后，如果用户遗漏了这个输入框，浏览器会返回一个提示信息，提醒用户在该输入框内输入有效数据，否则表单无法成功提交。因此，在使用了required属性之后，我们需要给该输入框配上醒目的提示符号。

　　required属性可以与下列input类型搭配使用：text, search, url, tel, email, password, date, datetime, datetime-local, month, week,

time, number, checkbox, radio, file。还有和<select>这两个HTML标签。<span style="line-height: 1.8em;">　</span></select>

　　要注意的是，maxlength这个属性无法返回错误提示，但是当用户输入的长度超过限制的时候，浏览器会阻止用户继续输入。因此，在使用它的时候，你一定要用醒目的文字向用户提示输入长度限制，以免用户不知道自己为何无法继续输入。

2. min, max和step：数字验证

min, max和step让我们可以对数字输入框添加限制。它们可以与range, number, date, month, week, datetime, datetime-local和time这些input类型搭配使用。

min和max属性让我们可以轻松的排除那些不合理的数据。例如下面的这段代码，这是用于年龄验证的一段代码：

 <form name="form" action="#" method="post">

  <label for="yourage">Your Age:</label>

  <input type="number" name="age" id="yourage" min="18" max="120">

  <input type="submit" value="Submit">

</form>

当限制验证算法发现用户输入的数字大于max的值，或是小于min的值的时候，它就会阻止用户的输入进入后端，并且在浏览器中返回一个错误提升。

step这个属性规定了用户只能按照等差数列的方式输入数字。例如，如果你想让用户选择闰年，给输入框添加step=“4”这个属性值，那么用户只能输入差值为4的倍数的数字。在下面的例子中，我使用了number这个input类型，因为HTML5中没有type=“year”这个类型。

 <form name="form" action="#" method="post">
  <label for="yourleapyear">Your Favourite Leap Year:</label>
  <input type="number" name="leapyear" id="yourleapyear"
      min="1972" max="2016" step="4">
  <input type="submit" value="Submit">
</form>

使用了这个限制，用户只能选择1972-2016年这个区间内的闰年。如果用户输入的年份并非闰年（差值不是4的倍数），那么浏览器就会返回一个错误提示。

 

3. maxlength：文本长度验证

maxlength这个属性，让我们可以定义输入框的最大字符限制。它可以与text, search, url, tel, email和password这些input类型以及这个HTML标签搭配使用。

maxlength非常适合使用在电话号码输入框上，因为电话号码的长度是固定的，不能超过某个特定的长度。

当我们想要限定用户的输入文本长度的时候，也可以使用这个属性。例如下面这段脚本，它将用户的输入长度限制在500个字符以内：

 <form name="form" action="#" method="post">
  <label for="yourmsg">Message (max 500 characters):</label>
  <textarea name="msg" id="yourmsg" cols="25" rows="4"

      maxlength="500"></textarea>

  <input type="submit" value="Submit">

</form>

　　4. pattern：Regex验证

　　pattern这个属性允许我们在验证过程中使用 正则表达式(Regular Expressions)。正则表达式是一套预先定义好的字符，它符合某个特定的模式。我们可以使用它来检索符合这个模式的字符串，也可以用它来加强这个模式所定义的特定格式。

　　使用pattern属性，我们可以完成后者——限制用户只能提交符合所给与的正则表达式的输入格式。

　　下面这个例子需要用户输入最少8个字符的密码，而且字符串中必须含有至少一个字母以及至少一个数字：

 <form name="form" action="#" method="post">

  <label for="yourpw">* Your Password:</label>

  <input type="password" name="pw" id="yourpw" required

        pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$">

  <input type="submit" value="Submit">

</form>

　　总结

　　在这篇文章中，我们探讨了如何使用HTML5原生的限制验证算法来进行浏览器表单验证。要想穿件自定义验证监本，我们需要使用Constraint Validation API 。

以上がHTML5制限検証の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。