js setCustomValidity方法

本文介绍如何使用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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值