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属性来查找验证错误的类型

有效性：一个 ValidityState 对象，描述元素的有效性状态。

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

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/

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

更多关于 ValidityState在这里