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

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

原创

最新推荐文章于 2023-11-23 13:04:56 发布 · 1.7k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#js #html #web

本文介绍了一个简单的JavaScript实现的密码框验证功能。通过设置密码长度限制并利用onblur事件触发验证，实现了密码输入的有效性检查，并提供了视觉反馈。

前言

最近一直在公司写文档类的工作，挺枯燥的，搞得整个人情绪比较低落。突然想到自己好像很久都没写代码了，所以就重温了一下密码框效果用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"&g