基于规则评分的密码强度检测算法测试程序(zxcvbn)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>三十客-基于规则评分的密码强度检测算法测试程序(zxcvbn)</title> </head> <style> .container > * { width: 200px; } .bar { margin: 5px 0 3px; border: 2px solid #ccc; overflow: hidden; } .bar > span { display: block; height: 20px; width: 1%; background-color: green; } </style> <body> <div class="container"> <input id ="pwd" type="text" maxlength="32" /> <div class="bar"> <span id="rate"></span> </div> <span id="score">0</span> </div> <script src="https://cdn.bootcss.com/zxcvbn/4.4.2/zxcvbn.js"></script> <script> document.addEventListener('DOMContentLoaded', function () { var pwd = document.getElementById("pwd"); pwd.addEventListener("keyup",function () { var result = zxcvbn(pwd.value); document.getElementById("score").innerHTML = "评分:"+result['score']*100.0 / 4; document.getElementById("rate").style.width = (result['score']*100.0 / 4)+"%"; }); }); </script> </body> </html>