input框，焦点事件

最新推荐文章于 2024-01-26 20:24:09 发布

风中摇曳的裤衩哥

最新推荐文章于 2024-01-26 20:24:09 发布

阅读量435

点赞数

分类专栏： JQ 文章标签： js html css jquery

本文链接：https://blog.csdn.net/weixin_48009560/article/details/115975554

版权

JQ 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				font-size: 25px;
			}
			.red{
				color: red;
			}
			.green{
				color: green;
			}
		</style>
	</head>
	<body>
		<input type="text" id="username"><span id="show"></span>
	</body>
</html>
<script src="../js/jquery2.0.1.js"></script>
<script type="text/javascript">
	$(function(){
		// 添加失去焦点
		$('#username').on('blur',function(){
			var username = $(this).val()
			if(username == ''){
				$('#show').text("用户名不能为空").addClass("red");
			    return false;
			}
			//正则
			var reg = /^[A-Z][A-Za-z0-9]{5,9}$/
			if(reg.test(username)){
				$('#show').text("用户名符合规定").addClass("green").removeClass("red")
			}else{
				$('#show').text("用户名不符合规定").addClass("red").removeClass("green")
			}
		})
	})
</script>

风中摇曳的裤衩哥

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
input框，焦点事件

直接上代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; font-size: 25px; } .red{ color: red; } .green{
复制链接

扫一扫