登录案例

Tutorial: DOM操作 Category: JS Published: 2026-04-07 13:58:26 Views: 20 Likes: 0 Comments: 0 
<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      div {
        width: 600px;
        margin: 100px auto;
      }

      .message {
        display: inline-block;
        font-size: 12px;
        color: #999;
        background: url(images/mess.png) no-repeat left center;
        padding-left: 20px;
      }

      .wrong {
        color: red;
        background-image: url(images/wrong.png);
      }

      .right {
        color: green;
        background-image: url(images/right.png);
      }
    </style>
  </head>

  <body>
    <div class="register">
      <input type="password" class="ipt" />
      <p class="message">请输入6~16位密码</p>
    </div>

    <script>
      // 首先判断的事件是表单失去焦点 onblur
      // 如果输入正确则提示正确的信息颜色为绿色小图标变化
      // 如果输入不是6到16位, 则提示错误信息颜色为红色 小图标变化
      // 因为里面变化样式较多, 我们采取className修改样式

      // 1.获取元素
      var ipt = document.querySelector(".ipt");
      var message = document.querySelector(".message");

      //2. 注册事件 失去焦点
      ipt.onblur = function () {
        // 根据表单里面值的长度 ipt.value.length
        if (this.value.length < 6 || this.value.length > 16) {
          message.className = "message wrong";
          message.innerHTML = "您输入的位数不对要求6~16位";
        } else {
          message.className = "message right";
          message.innerHTML = "您输入的正确";
        }
      };
    </script>
  </body>
</html>
Prev: 更新类名 Next: 开关灯案例