验证用户名和密码是否为空

标签: js

图片

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>验证用户名和密码是否为空</title>
  <style>
    body{background:#ddd;}
    .box{background:#fff;padding:20px 30px;width:400px;margin: 0 auto;text-align:center;}
    .btn{width:180px;height:40px;background:#3388ff;border:1px solid #fff;color:#fff;font-size:14px;}
    .ipt{width:260px;padding:4px 2px;}
    .tips{width:440px;height:30px;margin:5px auto;background:#fff;color:red;border:1px solid #ccc;display:none;line-height:30px;padding-left:20px;font-size:13px;}
  </style>
  <script>
      //编写一个名称为$的函数,根据id获取指定元素
      function $(id){
        return document.getElementById(id);
      }
      //编写checkEmpty函数,检查文本框或密码框内容是否为空,如果为空,tips显示提示
      function checkEmpty(obj){
        if (obj.value == '') {
          $('tips').style.display = 'block';
          $('tips').innerHTML = '注意:输入内容不能为空!';
        } else {
          $('tips').style.display = 'none';
        }
      }
      window.onload = function(){
        //为用户名文本框绑定onblur事件,检查失去焦点时是否为空
        $('user').onblur = function(){ 
          checkEmpty(this);
        }
        //为密码框绑定onblur事件,检查失去焦点时是否为空
        $('pwd').onblur = function(){
          checkEmpty(this);
        }
      }
    </script>
  </head>
  <body>
    <div id="tips" class="tips"></div>
    <div class="box">
      <p><label>用户名:<input id="user" class="ipt" type="text"></label></p>
      <p><label>密 码:<input id="pwd" class="ipt" type="password"></label></p>
      <p><button id="login" class="btn">登录</button></p>
    </div>
  </body>
  </html>
版权声明:本文为da_yu_hai_tang原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/da_yu_hai_tang/article/details/104235917