Javascript-簡單的密碼強度指示器
[英]Javascript - Simple Password Strength Indicator
問題描述
我正在嘗試通過更改html5 progress元素的值來使用javascript創建一個簡單的密碼強度指示器，但是出了點問題，請問有人可以在這里指出錯誤嗎？ 控制台顯示零錯誤，這一定與更改功能沒有綁定到ID為'pwd'的輸入有關嗎？
<!DOCTYPE html> <html> <head> <title>JavaScript Password Meter</title> <script> window.addEventListener('load', function() { var password = document.getElementById("pwd"); password.addEventListener('change', function() { // Reset if password length is zero if (password.length === 0) { document.getElementById("progresslabel").innerHTML = ""; document.getElementById("progress").value = "0"; return; } // Password requirements var match = new Array(); match.push("[$@$!%*#?&]"); // Special Chars match.push("[AZ]"); // Uppercase match.push("[0-9]"); // Numbers match.push("[az]"); // Lowercase // Check progress var prog = 0; for (var i = 0; i < match.length; i++) { if (new RegExp(match[i]).test(password)) { prog++; } } //Length must be at least 8 chars if(prog > 2 && password.length > 7){ prog++; } // Display it var progress = ""; var strength = ""; switch (prog) { case 0: case 1: case 2: strength = "25%"; progress = "25"; break; case 3: strength = "50%"; progress = "50"; break; case 4: strength = "75%"; progress = "75"; break; case 5: strength = "100% - Password strength is good"; progress = "100"; break; } document.getElementById("progresslabel").innerHTML = strength; document.getElementById("progress").value = progress; }); }); </script> </head> <body> <form> <div> <label for="pwd">Password:</label> <input type="text" id="pwd"> <progress id="progress" value="0" max="100">70</progress> <span id="progresslabel"></span></div> </form> </body> </html>
3 個解決方案
解決方案1
1 2018-12-29 03:56:27
一些問題：
- 您應該偵聽
keyup方法而不是change事件，以便每當密碼更改時就重新評估強度（change僅在模糊時觸發） -
password指的是pwd元素，但是您的代碼將其視為輸入值-我在函數中添加了一個pwd變量，它是password元素的值 - 字符測試可以簡化-我使用的
reduce在功能上等同於您的代碼
var password = document.getElementById("pwd"); password.addEventListener('keyup', function() { var pwd = password.value // Reset if password length is zero if (pwd.length === 0) { document.getElementById("progresslabel").innerHTML = ""; document.getElementById("progress").value = "0"; return; } // Check progress var prog = [/[$@$!%*#?&]/, /[AZ]/, /[0-9]/, /[az]/] .reduce((memo, test) => memo + test.test(pwd), 0); // Length must be at least 8 chars if(prog > 2 && pwd.length > 7){ prog++; } // Display it var progress = ""; var strength = ""; switch (prog) { case 0: case 1: case 2: strength = "25%"; progress = "25"; break; case 3: strength = "50%"; progress = "50"; break; case 4: strength = "75%"; progress = "75"; break; case 5: strength = "100% - Password strength is good"; progress = "100"; break; } document.getElementById("progresslabel").innerHTML = strength; document.getElementById("progress").value = progress; });
<form> <div> <label for="pwd">Password:</label> <input type="text" id="pwd"> <progress id="progress" value="0" max="100">70</progress> <span id="progresslabel"></span> </div> </form>
解決方案2
0 2018-12-29 06:20:42
jQuery.strength = function( element, password ) { var desc = [{'width':'0px'}, {'width':'20%'}, {'width':'40%'}, {'width':'60%'}, {'width':'80%'}, {'width':'100%'}]; var descClass = ['', 'progress-bar-danger', 'progress-bar-danger', 'progress-bar-warning', 'progress-bar-success', 'progress-bar-success']; var score = 0; if(password.length > 6){ score++; } if ((password.match(/[az]/)) && (password.match(/[AZ]/))){ score++; } if(password.match(/\\d+/)){ score++; } if(password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/)){ score++; } if (password.length > 10){ score++; } element.removeClass( descClass[score-1] ).addClass( descClass[score] ).css( desc[score] ); }; jQuery(function() { jQuery("#pwd").keyup(function() { jQuery.strength(jQuery("#progress-bar"), jQuery(this).val()); }); });
form { max-width: 400px; padding: 2em; border:1px dashed #ddd } #pwd{ border-radius:50px; padding: 10px 20px; border:2px solid #999; } *:focus { outline-style: none; } input { display: block; width: 100%; box-sizing: border-box; padding: 6px; border: 1px solid #ddd; } #progressBar { height: 20px; width: 100%; margin-top: 0.6em; border-radius:50px; border:2px solid #ddd } #progress-bar { width: 0%; height: 100%; transition: width 500ms linear; border-radius:50px; box-shadow:0px 1px 5px #555 } .progress-bar-danger { background: #d00; } .progress-bar-warning { background: #f50; } .progress-bar-success { background: #080; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h3> Password Strength Using JAVASCRIPT.</h3> <form name="passwordStrengthBox"> <div class="passBox"> <input type="text" id="pwd" autocomplete="off" placeholder="Enter Passwords"> <div id="progressBar"> <div id="progress-bar"></div> </div> </div> </form>
解決方案3
0 2018-12-31 08:46:38
var password = document.querySelector('#pwd'); password.onkeyup = function (event) { handleChange(password) } function handleChange(password) { var pwd = password.value var progresslabel = document.querySelector('#progresslabel') var progress = 0; var strength = '0'; switch (pwd.length) { case 1: strength = '12.5%'; progress = 12; break; case 2: strength = '25%'; progress = 25; break; case 3: strength = '37.5%'; progress = 37.5; break; case 4: strength = '50%'; progress = 50; break; case 5: strength = '62.5%'; progress = 62.5; break; case 6: strength = '75%'; progress = 75; break; case 7: strength = '87.5%'; progress = 87.5; break; case 8: strength = '100% - Password strength is good'; progress = 100; break; } // Number, a CAPS, lowercaps and special character. let regexp = /^(?=.*?[AZ])(?=.*?[az])(?=.*?[0-9])(?=.*?[#?!@$%^&*-])/; if (regexp.test(pwd)) { // Display it progresslabel.innerHTML = strength; document.getElementById("progress").value = progress; } else { progresslabel.innerHTML = '1 Cap, 1 digit, 8 digits atleast.' } }
<form> <div> <label for="pwd">Password:</label> <input type="text" id="pwd"> <progress id="progress" value="0" max="100">70</progress> <span id="progresslabel"></span> </div> </form>
我認為這是使用querySelector和keyup處理程序的正確方法。
如何使用 Javascript 將密碼強度計添加到輸入字段？
[英]How to add password strength meter to input fields with Javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.