Ausführliche Erläuterung der HTML5-Einschränkungsüberprüfung

Interaktive Websites und Programme wären ohne Formulare, die eine Verbindung zu Benutzern herstellen und die erforderlichen Daten speichern können, nicht möglich. Ja, wir benötigen gültige Benutzereingaben, aber wir müssen sie auf eine Weise erhalten, die den Benutzer nicht langweilt.

Obwohl wir gutes UX-Design verwenden können, um die Benutzerfreundlichkeit von Formularen zu verbessern, bietet uns HTML5 auch einen nativen Mechanismus zur Einschränkungsvalidierung, der es uns ermöglicht, Fehler im Frontend zu erkennen in der Eingabe.

In diesem Artikel konzentrieren wir uns auf die begrenzte Validierung durch Browser und diskutieren, wie Frontend-Entwickler HTML5 verwenden können, um gültige Benutzereingaben zu erhalten.

Warum eine Front-End-Eingabevalidierung erforderlich ist

Die Verwendung der Eingabevalidierung dient zwei Hauptzwecken. Was wir wollen, erfordert:

1. Praktisches

Was wir brauchen, sind verfügbare Daten. Wir benötigen von den Benutzern, dass sie verwertbare Daten in der richtigen Form übermitteln. Es ist zum Beispiel unmöglich, dass jemand, der vor 200 Jahren geboren wurde, heute noch am Leben ist. Möglicherweise finden Sie diese Daten sehr interessant, wenn Sie sie zum ersten Mal erhalten. Aber nach einer Weile werden Sie solche ungültigen Daten langweilen und die Datenbank wird mit einer großen Menge ungültiger Daten überflutet.

2. Sicherheit

Die hier erwähnte Sicherheit dient dazu, das Einschleusen schädlicher Inhalte zu verhindern – unabhängig davon, ob es sich handelt das absichtliche oder unbeabsichtigte Verhalten des Benutzers.

Die Praktikabilität von Daten (Beschaffung vernünftiger Daten) kann nur vom Bewusstsein des Benutzers abhängen, und das Back-End-Team kann Ihnen nicht viel helfen. Die Gewährleistung der Datensicherheit erfordert jedoch eine enge Zusammenarbeit zwischen Front-End- und Back-End-Teams.

Wenn Front-End-Entwickler die von Benutzern eingegebenen Daten ordnungsgemäß validieren können, wird das Back-End-Team viel weniger Probleme haben. Wenn Hacker eine Website angreifen, besteht eine der häufigsten Methoden darin, zusätzliche Daten oder Daten im falschen Format zu übermitteln. Entwickler können solche Sicherheitslücken vollständig blockieren, und zwar im Frontend.

Bei der Front-End-Eingabevalidierung besteht unsere Aufgabe darin, den vom Benutzer eingegebenen Daten angemessene Einschränkungen hinzuzufügen. Die Einschränkungsüberprüfungsfunktion von HTML5 stellt uns ein solches Tool zur Verfügung.

HTML5 begrenzt die Validierung

Vor der Einführung von HTML5 konnten Front-End-Entwickler nur JavaScript zur Benutzervalidierung verwenden Eingabe von Inhalten, aber dieser Prozess ist für Entwickler mühsam und es treten häufig verschiedene Fehler auf. Um die benutzerseitige Formularvalidierung zu verbessern, führt HTML5 einen eingeschränkten Validierungsalgorithmus ein, der in modernen Browsern ausgeführt werden kann, um die Gültigkeit der vom Benutzer übermittelten Daten zu überprüfen.

Bei der Auswertung der Daten verwendet dieser Algorithmus validierungsbezogene Attribute der Eingabeelemente, wie z. B. d5fd7aea971a85678ba271703566ebfd und 6082dc014199b53d243e64dbc23290a9.

　Dank der eingeschränkten Validierungsfunktion von HTML5 können wir bei der Überprüfung der Benutzerdatenübermittlung endlich auf JavaScript verzichten.

Um komplexere validierungsbezogene Aufgaben auszuführen, stellt uns HTML5 eine eingeschränkte Validierungs-JavaScript-API zur Verfügung, mit der wir personalisierte Validierungsskripte erstellen können.

Semantischen Eingabetyp zur Überprüfung verwenden

HTML5 führt einen semantischen Eingabetyp ein, der zur Überprüfung von Benutzereingaben verwendet werden kann. Die Methode soll begrenzt werden den Benutzer zu einem bestimmten Eingabeformular weiter.

Zusätzlich zu den vorherigen Eingabetypen (wie Text, Passwort, Senden, Zurücksetzen, Radio, Kontrollkästchen, Schaltfläche, versteckt), fügt HTML5 auch neue semantische Eingabetypen hinzu:

E-Mail,

Tel.,

URL,

Nummer,

Zeit ,

Datum,

Datum/Uhrzeit,

Datum/Uhrzeit-Lokal, Monat,

Woche, Bereich, Suche,

Farbe .

Schauen wir uns nun an, was passiert, wenn ein Benutzer den falschen Datentyp eingibt. Wir haben ein E-Mail-Eingabefeld mit dem folgenden Code erstellt:

<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>

Wenn der Benutzer eine Zeichenfolge eingibt, die nicht dem E-Mail-Format entspricht, verhindert der eingeschränkte Validierungsalgorithmus, dass das Formular gesendet wird . und gibt eine Fehlermeldung zurück:

　　这个规则也适用于其他的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的221f08282418e2996498697df914ce4e标签，它的作用与上面那个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类型，可以限制用户所提交的数据类型，但是在很多时候，这样还不够。在这个时候，d5fd7aea971a85678ba271703566ebfd标签的验证相关属性可以为我们提供帮助。

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

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

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

　　33a1e3d5bd794eb12ad4fbe928026f29

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

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

time, number, checkbox, radio, file。还有4750256ae76b6b9d804861d8f69e79d3和221f08282418e2996498697df914ce4e这两个HTML标签。　

　　要注意的是，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类型以及4750256ae76b6b9d804861d8f69e79d3这个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 。

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der HTML5-Einschränkungsüberprüfung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!