要求
1、用戶名和密碼為空點擊登錄時提示相應的提示
2、獲取用戶名輸入框時,錯誤提示清除
思路
1、創建1個input-text標簽和1個input-password標簽,1個input-botton標簽
2、把按鈕綁定點擊時間,然后檢查所有輸入框內容是否為空,為空則加上提示
3、把輸入框綁定事件,獲取焦點時清除提示
<!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>