checkValidity()验证输入信息合法性，自定义错误提示信息方法及误区

作者：AllinToyou | 2024-02-18 21:53:26

踩

checkvalidity

如果input元素中的数据合法则返回true，反之则返回false。inputObj.validationMessage系统会动态赋予默认值，比如type=“number” min=“100” max=“200” 在输入“1”时，默认值则可能是“请选择一个不小于100的值”。如果需要自定义错误提示信息，必须要用一下语句先取消自定义提示的方式，否则validity.customError的值一直会是true，即使输入正确，页面也会显示红色的错误提示信息。

setCustomValidity('') ;
setCustomValidity(null) ;
setCustomValidity(undefined);
1
2
3

粗暴型验证输入值是否在100~500之间

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<p>输入数字并点击验证按钮:</p>
<input id="id1" type="number" min="100" max="500" required>
<button onclick="myFunction()">验证</button>
<p>如果输入的数字未在100~500之间, 会显示错误信息。</p>
<p id="demo"></p>
<script>
function myFunction() {
    var txt = "";
	var inpObj = document.getElementById("id1");
	if(!isNumeric(inpObj.value)) {
		txt = "输入的数字不合法，请重新输入！";
	} else if (inpObj.value<100) {
        txt = "输入的值小于100，请重新输入！";
    } else if(inpObj.value>500){
		txt = "输入的值大于500，请重新输入！";
	}else {
        txt = "输入正确";
    }
    document.getElementById("demo").innerHTML = txt;
}
// 判断输入是否为数字
function isNumeric(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

使用checkValidity()验证输入值是否在100~500之间

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<p>输入数字并点击验证按钮:</p>
<input id="id1" type="number" min="100" max="500" required >
<button onclick="myFunction()">验证</button>
<p>如果输入的数字未在100~500之间, 会显示错误信息。</p>
<p id="demo"></p>
<script>
function myFunction() {
	var inpObj = document.getElementById("id1");
	//使用前先取消默认，否则下次点击checkValidity总返false
	inpObj.setCustomValidity(''); 
    if (inpObj.checkValidity() == false) {
		if(inpObj.value==''||inpObj==null){
			//自定义validity信息
			inpObj.setCustomValidity("输入为空或非数字！");
		}else if(inpObj.validity.rangeOverflow){
			inpObj.setCustomValidity("输入值大于500，请重新输入!");
		}else if(inpObj.validity.rangeUnderflow){
			inpObj.setCustomValidity("输入值小于100，请重新输入!");
		}
        document.getElementById("demo").innerHTML = inpObj.validationMessage;
    } else {
        document.getElementById("demo").innerHTML = "输入正确";
    }
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/110794