表单验证时忽略某条属性_具有“样式”属性HTML5表单验证

表单验证时忽略某条属性

在本教程中，我们将探索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

表单验证时忽略某条属性