js setCustomValidity方法

最新推荐文章于 2023-06-18 13:46:12 发布

原创最新推荐文章于 2023-06-18 13:46:12 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍如何使用JavaScript的setCustomValidity方法来自定义HTML表单的验证提示信息，通过实例展示了如何针对不同输入范围设置错误消息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用setCustomValidity方法改变自定义的提示信息

<p>输入数字并点击验证按钮:</p>
<input id="uu" type="number" max="700" min="200" required="required">
<button onclick="myfunction()">验证</button>
<p>如果输入的数字小于 200 或大于700，会提示错误信息。</p>

<p id="demo"></p>
<script>
	function myfunction(){
		var inpobj=document.getElementById("uu");
		inpobj.setCustomValidity("") //取消自定义提示的方式
		if (inpobj.checkValidity() == false){
			inpobj.setCustomValidity("输入错误，看清要求，重新输入")
			document.getElementById("demo").innerHTML=inpobj.validationMessage;
			
		}else{
			document.getElementById("demo").innerHTML="输入正确!";
		}
	}
</script>

<input id="id1" type="number" min="100">
<button onclick="myFunction()">验证</button>

<p>如果输入的数字小于100 , 会显示错误信息。</p>

<p id="demo"></p>

<script>
function myFunction() {
    var txt = "";
    if (document.getElementById("id1").validity.rangeUnderflow) {
        txt = "输入的值太小了";
    } else {
        txt = "输入正确";
    }
    document.getElementById("demo").innerHTML = txt;
}
</script>