验证提示效果

常见的两种验证提示效果

第一种 在这里插入图片描述

前面的输入框和校检部分不再赘述
后面显示的数据不合法是一个span标签，这里这个标签我们也需要通过document得到他的对象，然后通过这个对象对他进行修改，这里是通过得到的对象对span中结束与开始标签中的内容进行更改。
<span id="1"></span>span标签设置id
var obj1=document.getElementById("1")通过document获取span对象

if (patt.test(a)) {
    
    
		obj1.innerHTML="数据合法";
	} else{
    
    
		obj1.innerHTML="数据不合法";
	}

先判断文本框中的内容是否合乎规定，然后通过对象对其标签内容进行修改
对象名.innerHTML表示标签中起始与终止标签中的内容

以下是总代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function b(){
     
     
				var obj=document.getElementById("12");
				var a=obj.value;
				var patt=/^\w{5,12}$/;
				var obj1=document.getElementById("1");
				if (patt.test(a)) {
     
     
					obj1.innerHTML="数据合法";
				} else{
     
     
					obj1.innerHTML="数据不合法";
				}
			}
		</script>
	</head>
	<body>
		<input type="text" id="12" value="" />
		<button onclick="b()">校验</button>
		<span id="1"></span>
	</body>
</html>

第二种：
找两个叉号和对号的图片，然后用img标签把他们分别放入到网页中对应应该显示不合法和合法的位置可以通过width和height调整图片大小

if (patt.test(a)) {
    
    
		obj1.innerHTML="<img src='1.png' width='40' height='40' />";
	} else{
    
    
		obj1.innerHTML="<img src='11.png' width='40' height='40' />";
	}

在这里插入图片描述

常见的两种验证提示效果

猜你喜欢