HTML中的表单自定义验证和错误提示信息

翻滚的胖子
2023-06-12 18:57:03
前端技术
HTML CSS JavaScript

HTML中的表单是我们经常用到的一个功能，但是默认的验证和提示信息可能并不够友好。本文将为大家讲解HTML中如何使用表单自定义验证和错误提示信息，以及相应的代码案例。

HTML中表单自定义验证

在HTML5中，表单元素增加了一些新的特性，如required、min、max、maxlength、pattern等属性，这些属性可以在提交表单时进行自动验证，但是并不一定满足我们的需求。

为了实现更加复杂的验证，我们可以使用HTML5中的API进行自定义验证。在表单元素中，我们可以使用setCustomValidity()函数来设置自定义验证错误信息。

<form>
  <input type="text" id="name" required minlength="5">
  <input type="submit" value="提交">
</form>

<script>
var nameInput = document.getElementById('name');
nameInput.addEventListener('input', function (event) {
  if (nameInput.validity.valueMissing) {
    nameInput.setCustomValidity('请输入用户名');
  } else if (nameInput.validity.tooShort) {
    nameInput.setCustomValidity('用户名长度不能小于5位');
  } else {
    nameInput.setCustomValidity('');
  }
});
</script>

在上面的代码中，我们为输入框设置了必填属性required和最小长度minlength，当输入框内容不符合这些规则时，会自动弹出错误提示信息。但是我们还可以使用addEventListener()函数监听输入框的输入事件，当用户输入不符合规则时，手动调用setCustomValidity()函数设置自定义的错误提示信息。

HTML中表单错误提示信息样式

默认情况下，表单元素的错误提示信息会以系统默认的样式展示，我们可以通过CSS来自定义样式。

input:invalid {
  border-color: red;
}
input:invalid:focus {
  border-color: red;
  box-shadow: none;
}
input:invalid + span {
  color: red;
}

在上面的代码中，我们为输入框设置了:invalid伪类选择器，当输入框内容不符合规则时，会自动应用这个样式。我们还为输入框的:focus状态和下一个标签设置了样式，以达到更好的可读性。

HTML中表单错误提示信息本地化

如果我们的网站需要支持多语言，那么我们也需要将表单的错误提示信息本地化。在HTML5中，我们可以使用HTMLFormElement.setCustomValidity()函数来设置错误提示信息的本地化。

<form>
  <input type="text" id="name" required minlength="5">
  <input type="submit" value="提交">
</form>

<script>
var nameInput = document.getElementById('name');
nameInput.addEventListener('input', function (event) {
  if (nameInput.validity.valueMissing) {
    nameInput.setCustomValidity('请输入用户名');
  } else if (nameInput.validity.tooShort) {
    nameInput.setCustomValidity('用户名长度不能小于5位');
  } else {
    nameInput.setCustomValidity('');
  }
});

nameInput.setCustomValidity('用户名长度不能小于5位');
nameInput.setCustomValidity('');
nameInput.setCustomValidity('请输入用户名');

在上面的代码中，我们为输入框设置了本地化的错误提示信息。当用户语言设置为中文时，会显示中文错误提示信息，当用户语言设置为英文时，会显示英文错误提示信息。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com