如何更改最小值和最大值的HTML5表单验证默认错误消息？

Question

我找到了更改无效值的错误消息的答案。如何更改或删除HTML5表单验证默认错误消息？。

我需要为小于最小值和大于最大值的值显示不同的消息。

<input type="number" name="test" step="any" min="0.01" max="10.0">

如果用户输入-1，它应该说“请输入正值”。

如果用户输入20，则应显示“值不能超过10”。

Answer 1

通过HTML5表单验证（从您的链接），您可以使用input元素上的invalid事件侦听器来使用自定义消息。

var myInput = document.getElementById("myInput");
myInput.addEventListener("invalid", validate);
myInput.addEventListener("keyup", validate);

function validate() {
  var val = parseFloat(this.value);
  var min = parseFloat(this.min);
  var max = parseFloat(this.max);
  
  if (val < min) {
    this.setCustomValidity('Please enter a positive number');
  } else if (val > max) {
    this.setCustomValidity('Value cannot be more than ' + max);
  } else {
    this.setCustomValidity("");
  }
}

<form>
  <input id="myInput" type="number" name="test" step="any" min="0.01" max="10.0">
  <button type="submit">Submit</button>
</form>

Answer 2

可能有一些奇特的应用编程接口驱动的方法可以做到这一点，但是如果当输入不匹配模式时显示标题，您可以在更改时修改标题。

要支持小数，您需要一些更高级的正则表达式。

*我包含了表单标记，这样验证就可以在代码段中工作了

document.querySelector('input').addEventListener('change', (e) => {
  if (e.target.value > 10) {
    e.target.setAttribute('title', "Value cannot be more than 10");
  } else if (e.target.value < 0) {
    e.target.setAttribute('title', "Please enter a positive value");
  } else {
    e.target.setAttribute('title', "Please enter a number");
  }
})

<form><input type="text" required="" pattern="10|[0-9]" value="" title="This is an error message" /></form>