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>

猜你喜欢

转载自www.cnblogs.com/Kingfan1993/p/9813089.html