仅使用HTML5和Regex进行表单输入验证

最新推荐文章于 2022-03-06 14:02:54 发布

cunjie3951

最新推荐文章于 2022-03-06 14:02:54 发布

阅读量336

点赞数

文章标签： python java 正则表达式 javascript 大数据 ViewUI

表单输入的验证是应该认真对待的事情。幸运的是，没有垃圾数据会被提交到使用未经适当验证的表单数据的站点。但是，黑客还有机会破坏信任您的信息的用户的私人数据。

由于验证非常重要，因此有意义的是，有工具和库可以在前端和后端验证和清理数据。

在本教程中，我们的重点将放在使用HTML5的内置功能来验证各种输入，而无需依赖任何外部库。显然，您不应该只停留在基于HTML5的验证上，但这将是使网站上的表单更安全的良好起点。

表单输入元素

每当您希望从用户那里获得某种输入时，您很可能会使用HTML input元素。您是否想知道他们的名字，姓氏，电子邮件地址，他们当前居住的城市，他们的电话号码或他们最喜欢的运动队都没关系。 input元素是一种非常友好的方式，可从访问者那里获取信息。

但是，某些恶意用户希望利用这一事实，即他们可以在输入元素中输入几乎任何类型的字符串并提交表单。同样，可能有些用户只是不知道他们输入的格式错误。

通过将一些HTML5属性与表单元素一起使用，可以非常轻松地解决这两个问题。

类型属性

type属性将确定哪种输入对给定元素有效。如果没有为type属性指定值，则默认情况下将类型设置为text 。这基本上意味着，所有类型的文本输入都将被视为对该特定元素有效。

当您希望用户输入姓名时，这很好。但是，当您希望他们输入其电子邮件地址或年龄和体重等数字时，最好将type属性的值设置为适当的值。

您可以从以下两个值中进行选择：

email ：这将要求用户以有效格式输入其电子邮件地址。例如，他们不能只写myemail.com或something @或@ something.com 。他们将必须输入类似于myemail@domain.tld的值。当然，他们仍然可以输入不存在的电子邮件，但这是另一个问题！
number ：这将确保仅数字被视为有效输入。例如，当您以表格的形式询问某人的年龄时，他们将无法提交土豆或三十六作为输入。他们将必须写出实际的数字，例如36或15 。
url ：如果希望用户在输入元素中输入有效的URL，则可以将type属性设置为url 。这样可以防止他们输入诸如tutsplus之类的东西。但是， tutsplus.com也将被视为无效-用户将必须输入完整的URL，例如https://tutsplus.com 。
tel ：使用此值并不像其他值那么有用，因为电话号码的格式在世界各地都不同。浏览器无法根据输入匹配标准的模式来确定数字是否有效。但是，在以后进行自己的自定义验证时，将类型设置为tel可能会有所帮助。

type属性还有许多其他值，可用于指定对特定元素有效的输入类型。您可以在MDN 的“输入元素”参考页面上了解所有这些值。

以下CodePen演示显示了我们如何使用type属性来控制不同输入字段中允许的内容。

最小和最大长度属性

限制将什么作为有效输入传递给元素的另一种方法是使用minlength和maxlength属性。这些设置设置输入元素以使其有效所需的最小和最大字符数。

这两个属性的正确值将视情况而定。例如，某些网站可能希望用户名的长度在4到15个字符之间，而另一些网站可能会将用户名的最大长度限制为12个。类似地，与其他国家/地区相比，某些国家/地区的人的名字或简称会很长。

使用正则表达式进行表单验证

设置type属性值当然可以帮助我们限制传递为有效输入的内容。但是，您可以走得更远，并指定必须遵循的用户名或电子邮件地址才能被视为有效的模式。

假设您要确保用户名仅是字母数字。可以在pattern属性的帮助下轻松完成此操作。您只需要将其值设置为正则表达式即可，它将作为准则来确定哪个输入有效，哪个无效。

这是将regex与pattern属性一起使用的一些示例。

<input type="text" id="uname" name="uname" pattern="[a-zA-Z0-9]+" minlength="4" maxlength="10">

上面的模式将继续检查所有用户名仅包含来自z，AZ或0-9的字符。例如，monty42，42monty，MON42ty和mon42ty在这种情况下，所有有效用户名，但monty_42无效。

minlength和maxlength属性将确保用户名不能太小或太大。

如果您希望用户名以下划线等特定字符开头，则只需将其添加到模式的前面即可。

<input type="text" id="uname" name="uname" pattern="_[a-zA-Z0-9]+" minlength="4" maxlength="10">

现在，每个不以_开头且除az，AZ或0-9之后都包含其他字符的用户名将被视为无效。

我希望这有助于阐明我们如何使用pattern属性和一些正则表达式来限制有效输入，即使将type属性设置为text 。

使用Regex模式进行高级验证

您还可以将pattern属性与其他类型的输入元素（例如， email和url以限制认为有效的内容。例如，假设您只希望用户输入URL，它是tutsplus.com的子域。您可以简单地将pattern属性的值设置为https://.*\.tutsplus.com 。现在，任何类似https://google.com或https://envato.com的输入都将被视为无效。即使您使用以https：//开头的tutsplus.com URL，该URL 将无效，因为该URL应该以https：//开头。

电子邮件也可以做同样的事情。如果您希望电子邮件以特定的结尾，则只需使用pattern属性即可。这是一个例子：

<input type="email" id="email" pattern=".+@tutsplus\.com|.+@envato\.com">

如果以表格形式使用上述输入元素，则用户将只能输入以tutsplus.com或envato.com结尾的电子邮件地址。这意味着hi@gmail.com或howdy@something.com将无效。

必填字段和占位符文本

尽管required属性和placeholder属性不一定与验证相关，但是当有人填写表单时，它们可以用于改善用户体验。

不是每个人都愿意与网站共享他们的信息。如果表单包含十个不同的输入元素，但是您只需要五个或六个输入元素，其余的就可以获取额外的信息，那么最好让用户知道。

您可以使用required属性将某些输入字段标记为必填字段，而保持可选字段不变。这将使用户知道填写表格时必须提供的绝对最低限度的信息。这也可能会增加填写表格的人数，因为他们会事先知道填写所有字段并不是绝对必要的。

当使表单更加用户友好时， placeholder属性也有很长的路要走。例如，如果您不让用户知道他们必须输入以https：//开头并且是tutsplus.com的子域的URL ，那么他们可能会在未成功将something.com或代码提交URL字段后放弃。 .tutsplus.com 。

在下面的示例中，我们使用了模式，必填属性和占位符属性，以更精细地控制验证并获得更好的用户体验。

<form>
  <label for="name">Name: *</label>
  <input type="text" id="name" name="name" pattern="[a-zA-Z]+" placeholder="Monty" required>
  <br>
  <label for="name">Company Email Address: *</label>
  <input type="email" id="email" name="email" placeholder="joe@company.com" pattern=".+@company\.com" required>
  <br>
  <label for="name">Age: </label>
  <input type="number" id="age" name="age" min="10" max="80" placeholder="30">
  <br>
  <label for="name">Favorite Tuts+ Website: *</label>
  <input type="url" id="website" name="website" pattern="https://.*\.tutsplus\.com" placeholder="https://code.tutsplus.com" required>
</form>