<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--设置用户名输入框-->
<label >用户名 <input id="t1" class='info' type="text">
<!--空span标签用来后面绑定事件添加提示-->
<span></span>
</label>
<hr>
<!--设置密码输入框-->
<label >密码 <input id="t2" class="info" type="password">
<!--空span标签用来后面绑定事件添加提示-->
<span></span>
</label>
<hr>
<label id="b1"> <input type="button" value="登录"> </label>
<script src="JQ.js"></script>
<script>
// 按钮绑定点击事件
$('#b1').click(function () { let $name=$('#t1'); let $pwd=$('#t2');
// 按钮点击后检查输入框是否为空，为空则找到span便签添加提示
if ($name.val().length===0) { $name.next().text('用户名不能为空') }
if($pwd.val().length===0) { $pwd.next().text('密码不能为空') } });
// 给输入框添加时间，获取焦点时,将span标签中的内容设置成空
$('.info').focus(function () { $(this).next().text(''); })
</script>
</body>
</html>