当前位置: 首页 > 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 山东群英会天津时时彩 山东群英会上海时时乐
菲律宾申博电子游戏 太阳城会员开户 申博官网注册主页 太阳城娱乐官网
中原彩票开户登入 中博娱乐现金网 777彩票网网址 众彩平台登入
山东群英会五分彩 足球彩票黑龙江11选5 山东群英会新加坡2分彩 足球彩票上海快3
足球彩票安徽快3 山东群英会河南快3 足球彩票北京快3 山东群英会新疆11选5
568PT.COM 987sj.com 178sunbet.com 297PT.COM 958psb.com
33sbib.com 538PT.COM XSB898.COM 818XTD.COM 133DC.COM
ib57.com 219SUN.COM 1113898.COM 108ib.com 134sun.com
1112934.COM 778DC.COM 877TGP.COM 886XTD.COM 1112937.COM