JavaScript:登录页面

2022-08-14 09:55:32

用户登录页面,用焦点事件验证用户名和密码是否为空。

页面事件

load事件:用于body内所有标签都加载完成后才触发,又因其无需考虑页面加载顺序的问题,常常在开发具体功能时添加。

unload事件:用于页面关闭时触发,经常用于清除引用避免内存泄漏时使用。

焦点事件

事件名称

事件触发时机

focus

当获得焦点时触发(不会冒泡)

blur

当失去焦点时触发(不会冒泡)

样式:

<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>
<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="pass" class="ipt" type="password"></label></p>
    <p><button id="login" class="btn">登录</button></p>
  </div>
  <script>
    window.onload = function () {
      addBlur($('user'));      // 检测id为user的元素失去焦点后,value值是否为空
      addBlur($('pass'));      // 检测id为pass的元素失去焦点后,value值是否为空
    };
    function $(obj) {          // 根据id获取指定元素
      return document.getElementById(obj);
    }
    function addBlur(obj) {    // 为指定元素添加失去焦点事件
      obj.onblur = function () {
        isEmpty(this);
      };
    }
    function isEmpty(obj) {    // 检测表单是否为空
      if (obj.value === '') {
        $('tips').style.display = 'block';
        $('tips').innerHTML = '注意:输入内容不能为空! ';
      } else {
        $('tips').style.display = 'none';
      }
    }
  </script>
</body>

运行效果:

  • 作者:一条小橘猫
  • 原文链接:https://blog.csdn.net/WHT869706733/article/details/121659407
    更新时间:2022-08-14 09:55:32