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

最新推荐文章于 2021-10-31 10:57:49 发布

da_yu_hai_tang

最新推荐文章于 2021-10-31 10:57:49 发布

阅读量1.7k

点赞数 3

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.csdn.net/da_yu_hai_tang/article/details/104235917

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
使用js验证用户名和密码是否为空

<!DOCTYPE html><head> <meta charset="UTF-8"> <title>验证用户名和密码是否为空</title> <style> body{background:#ddd;} .box{background:#fff;padding:20px 30px;width...
复制链接

扫一扫