• 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>
    
  • 相关阅读:
    07-汤姆猫
    快捷键
    UIImageView属性
    UIImagePickerController
    UIDatePicker
    并发编程简介
    区别值类型数据和引用类型数据
    用条件属性而不是#if
    选择is或者as操作符而不是做强制类型转换
    始终使用属性(Property),而不是字段(Data Member)
  • 原文地址:https://www.cnblogs.com/Kingfan1993/p/9813089.html
Copyright © 2020-2023  润新知