运用JS实现密码框效果（附源码）

最新推荐文章于 2023-11-23 13:04:56 发布

测翻D_Fire

最新推荐文章于 2023-11-23 13:04:56 发布

阅读量1.6k

点赞数 3

分类专栏：代码文章标签： js html web

本文链接：https://blog.csdn.net/DFireTesting/article/details/108725333

版权

代码专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

最近一直在公司写文档类的工作，挺枯燥的，搞得整个人情绪比较低落。突然想到自己好像很久都没写代码了，所以就重温了一下密码框效果用js实现的方法。记录一下“美好”生活。

源码

附上源码，不够如果不是很熟练的话还是建议大家手打一遍，熟能生巧！

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>密码框效果实现</title>
 <style type="text/css">
 div{
  width: 600px;
  margin: 100px auto;
 }
  .pwdmsg{
   background-image: url(img/11.png);
   background-repeat:no-repeat;
   background-position: left center;
   color:black;
   display: inline-block;
   padding-left: 20px;
  } 
  .right{
   background-image: url(img/申请.png);
   background-repeat: no-repeat;
   color: green;
  }
  .wrong{
   background-repeat: no-repeat;
   background-image: url('img/通知.png');
   color: red;
  }
 </style>
</head>
<body>
 <div class="header">
 <input type="password" id="pwd">
 <p class="pwdmsg">请输入6-16位密码</p>
 </div>
 <script>
  var pwd=document.querySelector('#pwd'); 
  var aa=document.querySelector('.pwdmsg');
  pwd.onblur= function(){
    if(this.value.length>16 || this.value.length<6){
     aa.innerText='密码错误，请输入6-16位密码';
     aa.className='pwdmsg wrong';
    }else{
    aa.className='pwdmsg right';
    aa.innerText='密码格式正确'; 
    }
  }
 </script>
</body>
</html>

代码编写思路

密码框效果事件为失去焦点事件，当鼠标离开密码框且点击任意位置就会触发事件
输入密码点击任意位置出现提示，且该提示是由密码长度来决定的，所以重要的一步是获取密码框内密码的长度
根据长度经过判读给出不同的提示与效果

结语

background-image哪里我是随便找了图片的，按照源码的话图片像素20*20就够了，太大了显示不出来！

测翻D_Fire

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
运用JS实现密码框效果（附源码）

前言最近一直在公司写文档类的工作，挺枯燥的，搞得整个人情绪比较低落。突然想到自己好像很久都没写代码了，所以就重温了一下密码框效果用js实现的方法。记录一下“美好”生活。源码附上源码，不够如果不是很熟练的话还是建议大家手打一遍，熟能生巧！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic
复制链接

扫一扫