当前位置: 首页 > Chrome插件推荐 > 用JS实现密码框效果源码

用JS实现密码框效果源码

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

js密码框效果

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

代码如下:

<!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;
 }
  .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 class="register">
 <input type="password" id="pwd">
 <p class="massage">请输入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>


以上就是js密码框效果的代码示例,喜欢的可以试试看。

相关插件内容推荐

用JS实现密码框效果源码

聚合专题 2020-09-10 22:40:48

我们在输入密码时,将密码的长度设置为6-16,且在密码长度出现小于6或是大于16时,会出现提示,效果如下图 1. 此事件为失去焦点事件,当鼠标离开密码框且点击旁边就会触发事件

网站地图 申博太阳城电脑版登入 申博太阳城游戏进不了登入 太阳城现金网网址登入
申博官网登录入口 博体球网娱乐官网 菲律宾太阳城申博
快乐彩票上海快3 五星彩票网平台登录登入 mg电子游戏手机版官网 快乐彩票官网
申博太阳城充值中心登入 太阳城代理加盟登入 申博太阳城菠菜平台登入 申博太阳城开户平台登入
申博太阳城游戏进不去登入 申博太阳城电子游戏登入 申博太阳城真人网站登入 申博太阳城400客服登入
122TGP.COM 11TGP.COM 897XTD.COM MAQINSHI.COM 22sbib.com
122TGP.COM 778jbs.com 994sun.com 883XTD.COM 200xsb.com
505sj.com 267SUN.COM 1113889.COM 8JCS.COM 135PT.COM
658DC.COM 384xx.com 8AKS.COM 378PT.COM 897XTD.COM