验证约束出错_HTML5约束验证简介

最新推荐文章于 2024-04-17 13:00:00 发布

cune1359

最新推荐文章于 2024-04-17 13:00:00 发布

阅读量808

点赞数

文章标签： python java html 数据库 javascript ViewUI

如果没有能够使我们与用户联系并获得我们所需的数据以确保与他们进行顺利交易的表单，就无法想象交互式网站和应用程序。我们确实需要有效的用户输入 ，但是我们需要以不会让我们的用户感到沮丧的方式获取它。

尽管我们可以通过巧妙地选择UX设计模式来提高表单的可用性，但是HTML5还具有用于约束验证的本机机制，使我们能够在前端捕获错误 。

在本文中，我们将专注于浏览器提供的约束验证 ，并研究前端开发人员如何使用HTML5保护有效的用户输入 。

为什么我们需要前端输入验证

输入验证有两个主要目标。我们获得的内容必须是：

1.有用

我们需要可以使用的可用数据 。我们需要使人们以正确的格式输入实际数据 。例如，今天还活着的人没有200年前出生。首先，获得这样的数据可能看起来很有趣，但是从长远来看，这很烦人，并且用无用的数据填充了我们的数据库。

当提到安全性时，这意味着我们需要防止恶意内容的注入 -无论是故意的还是偶然的。

有用性（获取合理的数据） 只能在客户端实现 ，后端团队对此不能提供太多帮助。为了获得安全性 ， 前端和后端开发人员需要共同努力 。

如果前端开发人员正确地在客户端验证输入，则后端团队将不得不处理更少的漏洞 。入侵（站点）通常需要提交额外的数据 ，或格式错误的数据 。开发人员可以解决此类安全漏洞，并从前端成功解决。

例如，此PHP安全指南建议您检查客户端可以做的所有事情。他们通过提供许多示例来强调前端输入验证的重要性，例如：

“输入验证最适用于极为严格的值，例如，当某些值必须是整数，字母数字字符串或HTTP URL时。”

在前端输入验证中，我们的工作是对用户输入施加合理的约束 。 HTML5的约束验证功能为我们提供了这样做的方法。

HTML5约束验证

在HTML5之前，前端开发人员仅限于使用JavaScript验证用户输入 ，这是一个乏味且容易出错的过程。为了改善客户端表单验证，HTML5引入了一种约束验证算法，该算法可在现代浏览器中运行，并检查提交的输入的有效性 。

为了进行评估，该算法使用了与输入元素 （例如<input> ， <textarea>和<select> 相关的与验证相关的属性 。如果您想知道约束验证在浏览器中是如何逐步进行的，请查看WhatWG文档。

为了执行与验证有关的更复杂的任务，HTML5向我们提供了约束验证JavaScript API，我们可以使用它来设置自定义验证脚本。

验证语义输入类型

HTML5引入了语义输入类型 ，除了为用户代理指示元素的含义外，还可以通过将用户限制为某种输入格式来用于验证用户输入 。

除了HTML5之前已经存在的输入类型（ text ， password ， submit ， reset ， radio ， checkbox ， button ， hidden ），我们还可以使用以下语义HTML5输入类型 ： email ， tel ， url ， number ， time ， date ， datetime ， datetime-local ， month ， week ， range ， search ， color 。

我们可以在较旧的浏览器中安全地使用HTML5输入类型，因为它们将在不支持它们的浏览器中充当<input type="text">字段。

让我们看看当用户输入错误的输入类型时会发生什么。假设我们用以下代码创建了一个电子邮件输入字段：

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

当用户键入不使用电子邮件格式的字符串时，约束验证算法不提交表单 ，并返回错误消息 ：

相同的规则也适用于其他输入类型，例如对于type="url"用户只能提交遵循URL格式（以协议开头，例如http://或ftp:// ）的输入。

某些输入类型使用的设计甚至不允许用户输入错误的输入格式 ，例如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输入类型，则用户将不得不从颜色选择器中选择一种颜色或保留默认的黑色。输入字段受设计限制 ，因此不会给用户错误留下太多机会。

在适当的时候，值得考虑使用<select> HTML标记，该标记的作用类似于这些受设计限制的输入类型。它使用户可以从下拉列表中进行选择。

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

使用HTML5的验证属性

使用语义输入类型对允许用户提交的内容设置了某些约束，但是在许多情况下，我们希望进一步介绍。这是<input>标记与验证相关的属性可以为我们提供帮助的时候。

与验证相关的属性属于某些输入类型（不能在所有类型上使用），它们对它们施加了进一步的约束。

1.

required属性是最著名HTML验证属性。这是一个布尔属性 ，表示它不带任何值 ，如果要使用它，我们只需将其放在<input>标记内：

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

如果用户忘记在必需的输入字段中输入值，浏览器将返回一条错误消息 ，警告他们填写该字段，并且他们只有提供有效的输入后才能提交表单 。因此，始终向用户标记视觉上必需的字段很重要。

2.

min ， max和step属性使我们能够对数字输入字段施加约束 。它们可以与range ， number ， date ， month ， week ， datetime ， datetime-local和time输入类型一起使用。

min和max属性提供了一种轻松排除不合理数据的好方法。例如，以下示例迫使用户提交18至120岁之间的年龄。

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

当约束验证算法遇到小于min或大于max值的用户输入时，它将阻止它到达后端，并返回错误消息。

step属性指定数字输入字段的合法值之间的数字间隔 。例如，如果我们希望用户仅从leap年中进行选择，则可以向该字段添加step="4"属性。在下面的示例中，我使用了number输入类型，因为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>

由于存在预设的限制，如果用户使用number输入类型随附的小向上箭头，则只能从1972年至2016年的leap年中进行选择。他们还可以在输入字段中手动键入一个值，但是如果不符合约束条件，浏览器将返回错误消息。

3.

maxlength属性使得可以为文本输入字段设置最大字符长度 。它可以与text ， search ， url ， tel ， email和password输入类型以及<textarea> 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>

maxlength属性不会返回错误消息 ，但浏览器只是不允许用户键入超过指定字符数的字符。这就是为什么通知用户有关约束的关键，否则他们将不明白为什么不能继续输入。

4.正则表达式验证的

pattern属性允许我们在输入验证过程中使用正则表达式 。正则表达式是一组形成特定模式的预定义字符 。我们可以使用它来搜索遵循模式的字符串，也可以强制使用模式定义的某种格式。

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