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

tthappyer 2020-01-31

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

相关推荐

82550495 / 0评论 2020-03-05