Jquery实现检测用户输入用户名和密码不能为空

最新推荐文章于 2022-11-22 10:34:00 发布

江北一滴水

最新推荐文章于 2022-11-22 10:34:00 发布

阅读量1.5k

点赞数 3

分类专栏： jQuery 文章标签： jquery html 前端 web

本文链接：https://blog.csdn.net/qq_44165157/article/details/118997896

版权

jQuery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

实现代码：

<!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>

江北一滴水

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
Jquery实现检测用户输入用户名和密码不能为空

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>  <label >用户名 <input id="t1
复制链接

扫一扫

专栏目录