文本框中的事件应用(纯js验证邮箱)

最新推荐文章于 2022-02-16 15:09:56 发布

yilingpupu

最新推荐文章于 2022-02-16 15:09:56 发布

阅读量259

点赞数

分类专栏：小白学习具体案例---关于jQuery 文章标签： jquery javascript css html js

本文链接：https://blog.csdn.net/yilingpupu/article/details/105556316

版权

小白学习同时被 2 个专栏收录

29 篇文章 3 订阅

订阅专栏

具体案例---关于jQuery

6 篇文章 0 订阅

订阅专栏

文本框中的事件应用

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
		<script type="text/javascript" src="./email-text.js"></script>
		<link type="text/css" href="./email-text.css" rel="stylesheet"/>
		<title>文本框中的事件应用</title>
	</head>
	<body>
		<form id="form1" action="#">
			<div id="email" class="divInit">
				邮箱：<span id="spnTip" class="spnInit"></span>
				<input id="txtEmail" type="text" class="txtInit" />
			</div>
		</form>
	</body>
</html>

js

$(function(){
	$("#txtEmail").trigger("focus");//默认时文本框获取焦点
	$("#txtEmail").focus(function(){//文本框获取焦点事件
		$(this).removeClass("txtBlur").addClass("txtInit");
		$("#email").removeClass("divBlur").addClass("divFocu");
		$("#spantip").removeClass("spanBlur").removeClass("spanSucc").html("请输入您常用邮箱地址！ ");
	})
	
	$("#txtEmail").blur(function(){//文本框丢失焦点事件
		var vtxt = $("#txtEmail").val();
		if(vtxt.length == 0){
			$(this).removeClass("txtInit").addClass("txtBlur");
			$("#email").removeClass("divFocu").addClass("divBlur");
			$("#spnTip").addClass("spnBlur").html("邮箱地址不能为空！ ");
		}
		else{
			if(!chkemail(vtxt)){//检测邮箱格式是否正确
				$(this).removeClass("txtInit").addClass("txtBlur");
				$("#email").removeClass("divFocu").addClass("divBlur");
				$("#spnTip").addClass("spnBlur").html("邮箱格式不正确");
			}
			else{//如果正确
				$(this).removeClass("txtBlur").addClass("txtInit");
				$("#email").removeClass("divFocu");
				$("#spnTip").removeClass("spnBlur").addClass("spnSucc").html("");
			}
		}
	})
	
	//验证邮箱格式是否正确
	//参数staremail，需要验证的邮箱
	function chkemail(staremail){
		if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(staremail)){
			return false;
		}
		else{
			return true;
		}
	}
})

css

body{
	font-size: 13px;
}

/* 元素初始状态样式 */
.divInit{
	width: 390px;
	height: 55px;
	line-height: 55px;
	padding-left: 20px;
}
.txtInit{
	border: #666666 1px solid;
	padding: 3px;
	background-color: #CCCCCC;
}
.spnInit{
	width: 179px;
	height: 40px;
	line-height: 40px;
	float: left;
	margin-top: 8px;
	padding-left: 10px;
	background-repeat: no-repeat;
}

/* 元素丢失焦点样式 */
.divBlur{
	background-color: #FEEEC2;
}
.txtBlur{
	border: #666666 1px solid;
	padding: 3px;
	background-color: #FEEEC2;
}
.spnBlur{
	background-color: #EDFFD5;
}

/* div获取焦点样式 */
.divFocu{
	background-color: #EDFFD5;
}
.spnSucc{
	background-color: aquamarine;
	margin-top: 20px;
}
/* 验证成功时span样式 */

想法

如果触发事件，其中的区别操作是：删除一个class样式，加上一个class样式

yilingpupu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文本框中的事件应用(纯js验证邮箱)

文本框中的事件应用html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script> <sc...
复制链接

扫一扫

专栏目录