JS 表单验证 onblur事件

最新推荐文章于 2024-02-16 17:42:45 发布

闲鱼本鱼

最新推荐文章于 2024-02-16 17:42:45 发布

阅读量1.5k

点赞数 1

分类专栏： JavaScript知识点

本文链接：https://blog.csdn.net/qq_51369065/article/details/119466741

版权

前端开发 JavaScript 表单验证用户体验数据校验

关键词由CSDN通过智能技术生成

JavaScript知识点专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .register {
            width: 400px;
            margin: 100px auto;
        }
        span {
			padding-left: 17px;
            font-size: 12px;
            background: url(images/mess.png) no-repeat 0 1px;
        }
		.wrong {
			color: red;
			background: url(images/wrong.png) no-repeat 0 1px;
		}
		.success {
			color: green;
			background: url(images/right.png) no-repeat 0 1px;
		}
    </style>
</head>
<body>
    <div class="register">
        <input type="text">
        <span >请输入6~10位的用户名</span>
    </div>
	<script type="text/javascript">
		var input = document.querySelector("input");
		var message = document.querySelector("span");
		
		input.onblur = function() {					//失去焦点，添加的事件
			if (this.value.length<6 || this.value.length>10) {	//输入不符合要求
				message.className = "wrong";					//为span添加wrong样式
				message.innerHTML = "您输入的位数不对！"
			}else {												//输入符合要求
				message.className = "success";					//为span添加成功样式
				message.innerHTML = "您输入的正确"
			}
		}
	</script>
</body>
</html>

执行结果如下

闲鱼本鱼

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JS 表单验证 onblur事件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .register { .
复制链接

扫一扫