验证提示效果

最新推荐文章于 2022-07-18 19:50:58 发布

你好牛蛙

最新推荐文章于 2022-07-18 19:50:58 发布

阅读量630

点赞数 1

分类专栏： JavaScript笔记文章标签： javascript html

本文链接：https://blog.csdn.net/qq_45821251/article/details/108912052

版权

JavaScript笔记专栏收录该内容

36 篇文章 0 订阅

订阅专栏

常见的两种验证提示效果

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

前面的输入框和校检部分不再赘述
后面显示的数据不合法是一个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' />";
	}

在这里插入图片描述

你好牛蛙

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
验证提示效果

常见的两种验证提示效果第一种前面的输入框和校检部分不再赘述想看移动至这里####后面显示的数据不合法是一个span标签，这里这个标签我们也需要通过document得到他的对象，然后通过这个对象对他进行修改，这里是通过得到的对象对span中结束与开始标签中的内容进行更改。<span id="1"></span>span标签设置idvar obj1=document.getElementById("1")通过document获取span对象if (patt.test(a))
复制链接

扫一扫