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

【问题标题】：How can I change HTML5 form validation default error messages for min and max?如何更改最小值和最大值的 HTML5 表单验证默认错误消息？
【发布时间】：2018-09-27 20:05:39
【问题描述】：

我找到了更改无效值错误消息的答案How can I change or remove HTML5 form validation default error messages?。

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

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

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

如果用户输入 20，它应该说“值不能超过 10”。

【问题讨论】：

您链接的答案有什么问题？只发一般信息oninvalid="setCustomValidity('Enter a number beween 0.01 and 10 ')"
实际用例很复杂，比如“你不能输入超过 10 个，因为你的限制已过期”。

标签： javascript html validation

【解决方案1】：

可能有一些花哨的 API 驱动方式来执行此操作，但如果在输入与 pattern 不匹配时显示 title，您可以在更改时修改 title。

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

*我包含了form 标签，所以验证可以在 sn-p 中工作

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");
  }
})

&lt;form&gt;&lt;input type="text" required="" pattern="10|[0-9]" value="" title="This is an error message" /&gt;&lt;/form&gt;

【讨论】：

我认为^10$|^([0-9](\.[0-9]{1,})?)$ 应该可以支持小数，但我没有信心。

【解决方案2】：

通过 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>

【讨论】：