使用HTML5约束API进行表单验证

对于许多开发人员而言，验证Web表单一直是一项艰巨的任务。 以用户和开发人员友好的方式执行客户端验证真的很困难。 此外，以令人愉快的方式向用户通知验证错误是一项繁琐的任务。 HTML5约束验证API可帮助开发人员避免将JavaScript用于简单验证。

对于复杂的验证逻辑，该API可用于轻松执行客户端验证和显示错误消息。 在本教程中，我将为您提供HTML5约束验证API的概述，并讨论如何在您的项目中使用它来创建更好的Web表单。

在继续进行操作之前，请查看此兼容性图表以确保您的浏览器支持哪些功能。 请注意，尽管HTML5约束验证API提供了一种验证表单字段的绝佳方法，但必须始终进行服务器端验证。

基本约束验证

基本验证可以通过为输入元素的type属性选择最合适的值来执行。 例如，您可以通过编写以下HTML来验证电子邮件：

<input type=”email” />		//The field value must be an email

您可以通过编写以下标记来验证URL：

<input type=”URL” />			// The field value must be a URL

通过使用email或url作为type属性的值，将在提交表单时自动添加约束并自动验证字段。 如果发生任何验证错误，浏览器还会以非常用户友好的方式显示错误消息。

您还可以在表单中使用几个基于验证的属性。 以下是可用于实现基本约束的一些属性：

1. pattern ：pattern属性用于指定正则表达式，并且字段值必须与此模式匹配。 此属性可与text ， password ， email ， url ， tel和search等输入类型一起使用。
   例如，以下HTML代码段将pattern属性用于输入字段。

   <input type=”text” pattern=”[1-4]{5}” />

   提交表单后，将在输入字段上执行验证。 结果，在这种情况下，类似ABCD的值将无法通过验证。

2. required ： required属性，指示必须为输入元素指定一个值。

   <input type=”text” required />

   上面的代码段使用了required属性。 如果您将该字段留空并尝试提交表单，则会发生验证错误。

3. maxlength ：这是一个整数值，它指定特定输入字段允许的最大字符数。

   <input type=”text” maxlength=”20” />

   上面的代码段为输入字段添加了上限。 在此输入元素中输入的值必须少于20个字符。

4. min＆max ：顾名思义， min和max属性分别指定输入元素的下限和上限。

处理复杂约束

使用HTML5约束API可以轻松处理复杂的验证逻辑。 例如，您可以具有一个密码字段和一个确认密码字段。 您需要确保提交时两个字段中的值相同。 如果没有，应该向用户显示错误消息。 实际上，使用HTML5约束API可以非常轻松地完成此操作。

首先，我们需要在密码字段上附加一个onchange侦听器。 以下代码段显示了HTML表单。

<form name="ValidationForm">
	Password: <input type="password" id="password1"/>
	Confirm Password:<input type="password" id="password2"/>
	<input type="submit" value="submit"/>
</form>

由于在所有字段都经过完全验证之前不会有任何submit事件，所以实际上没有办法知道何时提交表单。 这就是为什么我们对change事件感兴趣。 每当触发change事件时，我们都需要检查两个密码是否匹配。 如果是，我们在输入元素（在这种情况下为密码字段）上使用空字符串作为参数调用setCustomValidity() 。

这意味着密码字段被标记为有效，因此在提交表单时将没有验证错误。 另一方面，如果在change事件中检测到密码不匹配，我们将调用setCustomValidity()并将错误消息作为参数。 这意味着密码字段将被标记为无效，并且在用户提交表单时将显示错误消息。

以下JavaScript实现了此逻辑：

<script type="text/javascript">
window.onload = function () {
	document.getElementById("password1").onchange = validatePassword;
	document.getElementById("password2").onchange = validatePassword;
}
function validatePassword(){
var pass2=document.getElementById("password2").value;
var pass1=document.getElementById("password1").value;
if(pass1!=pass2)
	document.getElementById("password2").setCustomValidity("Passwords Don't Match");
else
	document.getElementById("password2").setCustomValidity('');	 
//empty string means no validation error
}
</script>

使用上述方法的最好之处在于，您不必担心如何向用户显示错误消息。 您只需要调用带有适当参数的简单方法setCustomValidity() ，错误消息就会相应显示。

结论

您可以使用HTML5约束验证API实施许多简单到高级的约束。

该API提供了大量用于自定义验证过程的工具。 我们刚刚讨论了API的一部分。

要了解CSS挂钩等更高级的概念，有效性状态请参阅Mozilla的本教程 。

From: https://www.sitepoint.com/using-the-html5-constraint-api-for-form-validation/