javascript - HTML5 表单验证——错误信息自定义

Question

我有一个带有这样输入的表单。

<input type="text" name="question" class="form-control" required="" minlength="4" maxlength="2" size="20" oninvalid="setCustomValidity('please enter something')">

现在默认的验证消息工作得很好。但我想为特定规则设置自定义消息。

即对于像 required minlength maxlength 这样的规则，当每个规则都失败时，我想提供一条特定于失败规则的自定义错误消息。

我已经尝试过 oninvalid="setCustomValidity('please enter something')" 但这会为每个规则设置该消息。

如何为特定规则指定自定义错误消息？

Answer 1

使用 setCustomValidity 属性更改验证消息，使用 validity 属性查找验证错误类型

validity : A ValidityState object describing the validity state of the element.

在表单加载时，validate 属性为每个表单元素初始化，并在每次验证时更新，因为用户事件如按键、更改等。Here你可以找到可能的值

var email = document.getElementById("mail");

if (email.validity.valueMissing) {
  email.setCustomValidity("Don't be shy !");
}
else{
  event.target.setCustomValidity("");
}

email.addEventListener("input", function (event) {

  if (email.validity.valueMissing) {
    event.target.setCustomValidity("Don't be shy !");
  }
  else{
    event.target.setCustomValidity("");
  }
});  

演示 https://jsfiddle.net/91kc2c9a/2/

注意:由于某些未知原因，电子邮件验证在上面的 fiddle 中不起作用，但在本地应该可以正常工作

关于 ValidityState 的更多信息 here