http://runjs.cn/detail/lw6jeaha <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{width: 50%;margin: 50px auto} .box input{width: 200px;height: 25px} .box div{display: inline-block;visibility: hidden;overflow: hidden;vertical-align: middle;text-align: center} .box span{display: block;float: left;margin-right: 2px;width: 35px;height: 16px;line-height: 16px;font-size: 12px;background: rgb(187, 187, 187);color: rgb(221, 221, 221);} .box span.z1{background: rgb(204, 51, 51);color: #fff} .box span.z2{background: rgb(255, 204, 0);color: #fff} .box span.z3{background: rgb(51, 153, 51);color: #fff} .box p{color: #FF6666;font-size: 13px} </style> </head> <body> <div class="box"> <input type="password" placeholder="请输入密码" maxlength="18"> <div> <span>弱</span> <span>中</span> <span>强</span> </div> <p></p> </div> </body> <script type="text/javascript"> //密码----可为 数字、字母、符号 var t1=/[\d]/; //匹配数字 var t2=/[A-Za-z]/; //匹配字母 var t3=/(?=[\x21-\x7e]+)[^A-Za-z0-9]/; //匹配符号(非 字母和数字) var t4=/\s+/; //匹配空格 var inp = document.querySelector('.box input[type=password]'); inp.addEventListener('focus',function(){ inp.addEventListener('keyup', function() { err(""); var val = inp.value; if (t4.test(val)) { err("密码不能包含空格"); show(); return } if(val.length < 6){ err("密码至少6位"); show(); return } if(val.length>18){ err("密码最多18位"); show(); return } //数字、字母和符号, 含其中1种，密码弱 if(t1.test(val)||t2.test(val)||t3.test(val)) show(1); //数字、字母和符号, 含其中2种，密码中 if((t1.test(val)&&t2.test(val))||(t1.test(val)&&t3.test(val))||(t2.test(val)&&t3.test(val))) show(2); //数字、字母和符号, 含其中3种，密码强 if(t1.test(val)&&t2.test(val)&&t3.test(val)) show(3); }); }); inp.addEventListener('blur',function(){ err(""); var val = inp.value; if (t4.test(val)) { err("密码可由数字、字母、符号组合，不能包含空格"); show(); return } if(val.length < 6){ err("密码至少6位"); show(); return } if(val.length>18){ err("密码最多18位"); show(); } }); //显示 密码强弱 function show(e){ var div = document.querySelector('.box div'), html; if(!e){ div.style.visibility = 'hidden'; return } err(""); switch (e){ case 1:{ html = '<span class="z1">弱</span><span>中</span><span>强</span>' }break; case 2:{ html = '<span class="z2"></span><span class="z2">中</span><span>强</span>' }break; case 3:{ html = '<span class="z3"></span><span class="z3"></span><span class="z3">强</span>' }break; } div.innerHTML = html; div.style.visibility = 'visible'; } //显示错误信息 function err(e){ document.querySelector('.box p').innerText = e; } </script> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » js检验密码强弱 喜欢 (0)or分享 (0)
