Detailed explanation of HTML5 restriction verification

Interactive websites and programs would be impossible without forms that can connect with users and hold the required data. Yes, we do need valid user input, but we need to get it in a way that doesn't bore the user.

Although we can use good UX design to improve the usability of forms, HTML5 also provides us with a native mechanism for restriction validation, which allows us to The front end detects errors in the input.

In this article, we will focus on the limited validation provided by browsers and discuss how front-end developers can use HTML5 to obtain valid user input.

Why front-end input validation is needed

Using input validation has two main purposes. What we want requires:

　1. Practical

What we need is available data. We need users to submit actionable data in the correct form. For example, it is impossible for anyone born 200 years ago to be alive today. You may find this data very interesting when you first get it. But after a while, such invalid data will bore you, and the database will be flooded with a large amount of invalid data.

　2. Security

The security mentioned here is to prevent the injection of malicious content-no matter Is it the user's intentional behavior or unintentional behavior.

The practicality of data (obtaining reasonable data) can only rely on the user's awareness, and the back-end team cannot provide you with much help. However, ensuring data security requires close collaboration between front-end and back-end teams.

If front-end developers can properly validate the data entered by users, the back-end team will face much less problems. When hackers attack a site, one of the most common methods is to submit additional data or submit data in the wrong format. Developers can completely block such security holes, and they can do it on the front end.

In front-end input validation, our job is to add reasonable restrictions to the data entered by the user. The restriction verification function of HTML5 provides us with such a tool.

HTML5 limits validation

## Before the advent of HTML5, front-end developers could only use JavaScript to validate user input. content, but this process is painful for developers, and various errors often occur. In order to improve user-side form validation, HTML5 introduces a restricted validation algorithm, which can run in modern browsers to check the validity of user-submitted data.

When evaluating the data, this algorithm uses validation-related attributes of the input elements, such as d5fd7aea971a85678ba271703566ebfd, 680204f04b0c98aa3c923e36bb5ad6ed and 221f08282418e2996498697df914ce4e.

　Thanks to the restricted validation function of HTML5, we can finally get rid of JavaScript when verifying user data submission.

To perform more complex validation-related tasks, HTML5 provides us with a restricted validation JavaScript API, which we can use to create personalized validation scripts.

Use semantic input type for verification

HTML5 introduces a semantic input type, which can be used to verify user input, method Is to limit the user to a specific input form.

In addition to the previous input types (such as text, password, submit, reset, radio, checkbox, button, hidden), HTML5 also adds a new semantic input type:

email,

tel,

url,

number,

time,

date,

datetime,

datetime-local, month,

week, range, search,

color .

Now let’s take a look at what happens if a user enters the wrong data type. We have created an email input box with the following code:

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

If the user enters a string that does not conform to the email format, the restricted validation algorithm will prevent the form from being submitted, and Returns an error message:

　　这个规则也适用于其他的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 。

The above is the detailed content of Detailed explanation of HTML5 restriction verification. For more information, please follow other related articles on the PHP Chinese website!