密码格式验证案例

最新推荐文章于 2022-10-31 14:12:28 发布

产品迪

最新推荐文章于 2022-10-31 14:12:28 发布

阅读量1k

点赞数

分类专栏：前端文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_46054543/article/details/109470901

版权

前端专栏收录该内容

68 篇文章 0 订阅

订阅专栏

本文介绍了一个密码格式验证的案例，通过JavaScript的onblur事件和HTML DOM的className属性结合CSS样式，实现输入框失去焦点时的提示、正确和错误样式显示。

摘要由CSDN通过智能技术生成

密码格式验证案例：

先看效果图：
在这里插入图片描述

核心思路如下：

一、失去焦点方法
myinput.onblur = function () {
//方法体
}
二、利用HTML DOM className 属性，在CSS样式里定义提示、正确、错误的三个样式类

核心代码如下：

<script>
      //获取类元素
      var myinput = document.querySelector('.ipt');
      var mytips = document.querySelector('.tips');
      //失去焦点事件
      myinput.onblur = function () {
          if (myinput.value.length < 6 || myinput.value.length > 18) {
              //在tips样式的基础上 再加false样式
              mytips.className = 'tips false';
              mytips.innerHTML = '格式错误，请重新输入';
          } else if (myinput.value.length >= 6 && myinput.value.length <= 18){
              //在tips样式的基础上 再加right样式
              mytips.className = 'tips right';
              mytips.innerHTML = '格式正确，请重新输入';
          } else {
              //变回tips样式
              mytips.className = 'tips';
              mytips.innerHTML = '请输入...';
          }
      }
  </script>

结构代码如下：

<div class="login">
     <input class="ipt" type="password">
     <p class='tips'>请输入6~18位密码...</p>
 </div>

CSS样式代码如下：

        * {
            padding: 0;
            margin: 0;
        }
        .login {
            width: 500px;
            height: 100px;
            padding: 50px;
            margin: 50px auto;
            background-color: snow;
            border: 2px solid black;
            border-radius: 15px;
            box-shadow: 10px 10px 10px 10px gainsboro;
        }
        .ipt {
            width: 200px;
            height: 30px;
        }
        .tips {
            display: inline-block;
            height: 50px;
            line-height: 50px;
            font-size: 12px;
            color: gray;
            margin-left: 20px;
            padding-left: 50px;
            padding-right: 50px;
            background: url(images/tips.png) no-repeat left center;
        }
        .right {
            color: greenyellow;
            background-image: url(images/right.png);
        }
        .false {
            color: red;
            background-image: url(images/false.png);
        }