Jquery實現檢測使用者輸入使用者名稱和密碼不能為空
阿新 • • 發佈：2018-11-10
要求
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>