Jquery實現檢測用戶輸入用戶名和密碼不能為空


要求

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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM