HTML5 제한 검증에 대한 자세한 설명

대화형 웹사이트와 프로그램은 사용자와 연결되고 필요한 데이터를 보유하는 양식 없이는 불가능합니다. 예, 유효한 사용자 입력이 필요하지만 사용자가 지루해하지 않는 방식으로 입력을 받아야 합니다.

좋은 UX 디자인을 사용하여 양식의 유용성을 향상시킬 수 있지만 HTML5는 제한 유효성 검사를 위한 기본 메커니즘도 제공합니다. 입력 오류.

이 기사에서는 브라우저가 제공하는 제한된 유효성 검사에 중점을 두고 프런트 엔드 개발자가 HTML5를 사용하여 유효한 사용자 입력을 얻는 방법에 대해 논의합니다.

프런트 엔드 입력 검증이 필요한 이유

@ 입력 검증을 사용하는 데는 두 가지 주요 목적이 있습니다. 우리가 원하는 것은 다음과 같습니다:

1. 실용적

@ 우리에게 필요한 것은 이용 가능한 데이터입니다. 사용자는 실행 가능한 데이터를 올바른 형식으로 제출해야 합니다. 예를 들어, 200년 전에 태어난 사람이 오늘날 살아 있다는 것은 불가능합니다. 이 데이터를 처음 얻으면 매우 흥미로울 수 있습니다. 그러나 시간이 지나면 이러한 유효하지 않은 데이터는 여러분을 지루하게 만들고, 데이터베이스는 엄청난 양의 유효하지 않은 데이터로 가득 차게 될 것입니다.

　 2. 보안

여기서 언급하는 보안은 악성 콘텐츠의 주입을 방지하기 위한 것입니다. 사용자의 의도적인 행동 또는 의도하지 않은 행동.

데이터의 실용성(합리적인 데이터 획득)은 사용자의 인식에만 의존할 수 있으며, 백엔드팀에서는 많은 도움을 드릴 수 없습니다. 그러나 데이터 보안을 보장하려면 프런트엔드 팀과 백엔드 팀 간의 긴밀한 협력이 필요합니다.

프론트엔드 개발자가 사용자가 입력한 데이터를 적절하게 검증할 수 있다면 백엔드 팀이 직면하는 문제는 훨씬 줄어들 것입니다. 해커가 사이트를 공격할 때 가장 일반적인 방법 중 하나는 추가 데이터를 제출하거나 잘못된 형식으로 데이터를 제출하는 것입니다. 개발자는 이러한 보안 허점을 완벽하게 차단할 수 있으며 프런트엔드에서 이를 수행할 수 있습니다.

프런트 엔드 입력 유효성 검사에서 우리의 임무는 사용자가 입력한 데이터에 합리적인 제한을 추가하는 것입니다. HTML5의 제한 확인 기능은 이러한 도구를 제공합니다.

HTML5 제한 검증

HTML5가 출현하기 전에 프런트엔드 개발자는 JavaScript를 사용하여 사용자를 검증할 수 있었습니다. 하지만 이 과정은 개발자에게 고통스럽고 다양한 오류가 자주 발생합니다. 사용자 측 양식 유효성 검사를 개선하기 위해 HTML5는 최신 브라우저에서 실행하여 사용자가 제출한 데이터의 유효성을 확인할 수 있는 제한된 유효성 검사 알고리즘을 도입합니다.

데이터를 평가할 때 이 알고리즘은 d5fd7aea971a85678ba271703566ebfd 및 11c693e8569e98a75683a68ea453babc标签，它的作用与上面那个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 。

위 내용은 HTML5 제한 검증에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!