对于许多开发人员而言,验证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
属性的值,将在提交表单时自动添加约束并自动验证字段。 如果发生任何验证错误,浏览器还会以非常用户友好的方式显示错误消息。
您还可以在表单中使用几个基于验证的属性。 以下是可用于实现基本约束的一些属性:
- pattern :pattern属性用于指定正则表达式,并且字段值必须与此模式匹配。 此属性可与
text
,password
,email
,url
,tel
和search
等输入类型一起使用。
例如,以下HTML代码段将pattern
属性用于输入字段。<input type=”text” pattern=”[1-4]{5}” />
提交表单后,将在输入字段上执行验证。 结果,在这种情况下,类似ABCD的值将无法通过验证。
- required :
required
属性,指示必须为输入元素指定一个值。<input type=”text” required />
上面的代码段使用了
required
属性。 如果您将该字段留空并尝试提交表单,则会发生验证错误。 - maxlength :这是一个整数值,它指定特定输入字段允许的最大字符数。
<input type=”text” maxlength=”20” />
上面的代码段为输入字段添加了上限。 在此输入元素中输入的值必须少于20个字符。
- 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/