我找到了这个答案,用于更改无效值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,则应该说&#34;请输入正值&#34;。
如果用户输入20,则应该说&#34;值不能超过10&#34;。
答案 0 :(得分:0)
可能有一些奇特的API驱动方式,但如果输入与title
不匹配时显示pattern
,则只需修改title
即可1}}改变。
为了支持小数,你需要一些更高级的正则表达式。
*我添加了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");
}
})
&#13;
<form><input type="text" required="" pattern="10|[0-9]" value="" title="This is an error message" /></form>
&#13;
答案 1 :(得分:0)
通过HTML5表单验证(来自您的链接),您可以使用invalid
元素上的input
事件侦听器来使用自定义消息。
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("");
}
}
&#13;
<form>
<input id="myInput" type="number" name="test" step="any" min="0.01" max="10.0">
<button type="submit">Submit</button>
</form>
&#13;