JS实现密码框效果

编程开发 2020-10-15 07:27:23 32

导读

在输入密码时，将密码的长度设置为6-16，且在密码长度出现小于6或是大于16时，会出现提示，效果如下图 1.此事件为失去焦点事件，当鼠标离开密码框且点击旁边就会触发事件 2.输入密码会出现提示，事件发生与密码的长度有关 3.根据长度再来判断该提示的消息与效……

在输入密码时，将密码的长度设置为6-16，且在密码长度出现小于6或是大于16时，会出现提示，效果如下图

JS实现密码框效果

1. 此事件为失去焦点事件，当鼠标离开密码框且点击旁边就会触发事件
2. 输入密码会出现提示，事件发生与密码的长度有关
3. 根据长度再来判断该提示的消息与效果.

代码如下：

<!DOCTYPE html> <html> <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;  }   .massage{    background-image: url(gth.png);    background-repeat:no-repeat;    background-position: left center;    color:black;    display: inline-block;    padding-left: 20px;   }    .right{    background-image: url(right.png);    background-repeat: no-repeat;    color: green;   }   .wrong{    background-repeat: no-repeat;    background-image: url(wrong.png);    color: red;   }  </style> </head> <body>  <div>  <input type="password" id="pwd">  <p>请输入6-16位密码</p>  </div>  <script>   var pwd=document.querySelector('#pwd');    var aa=document.querySelector('.massage');   pwd.onblur= function(){     if(this.value.length>16 || this.value.length<6){      aa.innerText='错误，请输入6-16为密码';      aa.className='massage wrong';     }else{     aa.className='massage right';     aa.innerText='密码正确';      }   }  </script> </body> </html>