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

Question

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

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

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

如果用户输入 -1，则应显示"请输入正值"。

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

Answer 1

可能有一些花哨的 API 驱动的方法可以做到这一点，但如果在输入与pattern不匹配时显示title，您只需在更改时修改title即可。

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

*我包含了form标签，以便验证将在代码段中工作

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>

Answer 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>