表单验证时忽略某条属性
在本教程中,我们将探索HTML的pattern
属性,使用它来帮助我们自定义验证表单的方式。
HTML5表单验证
表单验证对于网站的安全性和可用性至关重要。 验证过程将在提交输入值之前评估输入值的格式是否正确。 例如,如果我们有一个电子邮件地址的输入字段,则该值肯定必须包含一个有效的电子邮件地址。 它应以字母或数字开头,后跟@
符号,然后以域名结尾。
HTML5规范通过引入新的输入类型(例如email
, url
和tel
使验证变得容易一些,这些输入类型也与预定义的验证打包在一起。 只要给定的值不符合预期的格式,这些输入类型就会抛出错误消息,从而阻止提交。
但是,期望满足每种可能的输入方案都是不切实际的。 如果您有用户名,邮政编码或未指定为标准输入类型的任何特殊数据类型,该怎么办? 我们如何验证这些输入? 这就是属性pattern
起作用的地方。
使用模式属性
pattern
属性仅适用于input
元素。 它允许我们使用正则表达式(RegEx)定义自己的规则来验证输入值。 同样,如果该值与指定的模式不匹配,则输入将引发错误。
例如,假设我们在表单中输入了用户名。 用户名没有标准类型,因此我们使用常规text
输入类型:
<form action="somefile.php">
<input type="text" name="username" placeholder="Username">
</form>
让我们定义一个使用pattern
属性添加的规则。 在这种情况下,我们将指定用户名应仅包含小写字母; 不允许使用大写字母,数字或其他特殊字符。 另外,用户名长度不能超过15个字符。 在RegEx中,此规则可以表示为[az]{1,15}
。
在我们的用户名输入中添加[az]{1,15}
作为pattern
属性的值:
<form action="somefile.php">
<input type="text" name="username" placeholder="Username" pattern="[a-z]{1,15}">
</form>
现在,由于它仅接受小写字母,因此提交任何其他值将引发错误消息:
如您在上面看到的,错误消息显示“请匹配请求的格式。” 因此,我们的验证工作正常,但是此消息并没有帮助我们的用户了解所请求的格式实际上是什么。 UX失败。
自定义验证消息
幸运的是,我们可以自定义消息以提供更多帮助,并且有两种方法可以实现此目的。 最简单的方法是在我们的输入元素中指定title
属性:
<form action="somefile.php">
<input
type="text"
name="username"
placeholder="Username"
pattern="[a-z]{1,15}"
title="Username should only contain lowercase letters. e.g. john">
</form>
现在,标题和默认消息一起包括在内:
尽管如此,弹出消息还是不一致的。 如果将其与前面显示的电子邮件输入类型所抛出的信息进行比较,则实际说明可能会更加突出。
第二种方法将为我们解决这个问题。
替换默认HTML5验证消息
现在让我们用完全自定义的消息替换默认的“请匹配请求的格式”。 我们将使用一些JavaScript来做到这一点。
首先向input
元素添加一个id
,以便能够方便地选择它。
<form action="somefile.php">
<input
type="text"
name="username"
placeholder="Username"
pattern="[a-z]{1,15}"
id="username">
</form>
现在,我们可以使用JavaScript选择输入元素并将其分配给变量(在页面上的<script>
标记之间,在单独JavaScript文件中或在CodePen的JS窗格中):
var input = document.getElementById('username');
最后,我们指定输入显示无效状态时使用的消息。
input.oninvalid = function(event) {
event.target.setCustomValidity('Username should only contain lowercase letters. e.g. john');
}
oninvalid
事件继承了一个event
对象,该对象包含一些属性,包括target
属性(无效元素)和validationMessage
,其中包含错误文本消息。 在上面的示例中,我们使用setCustomValidity()
方法覆盖了文本消息。
现在,我们应该找到无缝替换默认消息的自定义消息。
设置我们的验证状态
为了补充新的输入类型和设置自定义验证消息的这些方法,CSS3规范引入了两个有用的伪类:valid
和:invalid
。 这些使我们能够根据输入的有效性状态来应用样式,例如:
input:invalid {
border-color: red;
}
input,
input:valid {
border-color: #ccc;
}
使用这些伪类时,需要牢记以下几点:
- 首先,即使输入值为空,默认情况下也会应用
:valid
。 因此,如您在上面看到的,我们将border-color
设置为#ccc
; 输入元素的默认颜色。 除非我们添加了required
属性,否则空值始终被视为有效。 在这种情况下,输入无效,并给出红色边框颜色。 - 有效和无效样式将在用户键入时立即应用,即使该值为空。 即时样式更改可能会使用户感到恐慌。
关于样式化弹出消息的一句话
HTML5表单验证已成为HTML5规范的新标准,但是错误弹出窗口的显示方式完全取决于浏览器供应商。 在不同的浏览器中会有不同的美感,这将不利于UI的一致性。
几年前,谷歌浏览器阻止了自定义默认弹出样式的功能 。 如果这是您要实现的目标,唯一剩下的选择就是使用JavaScript完全覆盖弹出消息,因此让我们来看看它是如何工作的!
更先进
我们将创建一个自定义弹出窗口,该弹出窗口将在我们输入的值无效时显示。 首先,我们需要选择几个必需的元素,即input
和form
元素:
var input = document.getElementById('username');
var form = document.getElementById('form');
接下来,我们将创建一个新元素,其中将包含我们的消息:
var elem = document.createElement('div');
elem.id = 'notify';
elem.style.display = 'none';
form.appendChild(elem);
在这里,我们创建了一个新的div
元素。 我们给它提供了一个id的notify
,并通过将display
属性设置为none
来隐藏它。 最后,我们在form
添加了新的div
。
处理事件
我们需要处理两个事件。 首先, invalid
事件在输入值与模式不匹配时调用。 我们将在invalid
事件中运行以下命令:
input.addEventListener('invalid', function(event){
event.preventDefault();
if ( ! event.target.validity.valid ) {
elem.textContent = 'Username should only contain lowercase letters e.g. john';
elem.className = 'error';
elem.style.display = 'block';
input.className = 'invalid animated shake';
}
});
在这里,带有event.preventDefault();
,我们将阻止默认行为,以使默认浏览器弹出消息不会出现。 相反,我们将通过新的div
元素展示自己的内容。 我们将文本消息添加到内容中,添加新类, error
并通过将显示设置为block
来显示消息。
我们还向输入元素添加了一个invalid
类,使其具有红色边框颜色。 我们还需要在CSS样式表中设置样式规则。
input.invalid {
border-color: #DD2C00;
}
此外,您还可以从Animate.css添加animated shake
类。 通过使用震动动画,它具有一定的风格。
第二个事件是input
事件。 更改输入值时调用此事件。 我们将使用此事件将输入恢复为正常状态,并隐藏弹出消息,如下所示。
input.addEventListener('input', function(event){
if ( 'block' === elem.style.display ) {
input.className = '';
elem.style.display = 'none';
}
});
如您在上面看到的,我们将从input
元素中删除类名称,并隐藏弹出消息。
现在,我们有一个完全自定义的弹出验证消息。 尝试一下:输入任何无效值:
注意 :如果您正在寻找鼓舞人心的表单UI设计,请不要忘记查看Envato Elements。
最后的想法
将标准输入类型与pattern
属性一起使用将为表单提供额外的验证层,但请注意,您也应该执行某种服务器端验证。
令人惊讶的是,即使用户在浏览器中禁用了JavaScript,最新的浏览器仍会显示弹出窗口验证并阻止表单提交。 实际上,如今所有主流浏览器的支持都非常可靠:
我希望您喜欢本教程并将其作为HTML5表单验证的方便参考。
学习JavaScript:完整指南
我们已经建立了完整的指南,可以帮助您学习JavaScript ,无论您是刚开始作为Web开发人员还是想探索更高级的主题。
翻译自: https://webdesign.tutsplus.com/tutorials/html5-form-validation-with-the-pattern-attribute--cms-25145
表单验证时忽略某条属性