<!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>