Home > Article > Web Front-end > JS implements weak, medium and strong password display
This article mainly shares with you JS to implement weak, medium and strong display of passwords. It is mainly shared with you in the form of code. I hope it can help you.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <script> onload = function () { var tds = document.getElementById('tb').getElementsByTagName('td'); document.getElementById('txt').onkeyup = function () { for (var i = 0; i < tds.length; i++) {//防止输入正确密码后倒退删除时候出问题 tds[i].style.backgroundColor = 'gray'; } if (this.value.length>0) { var result = checkPwd(this.value); if (result<=1) {//弱 tds[0].style.backgroundColor='red'; }else if (result==2) {//中 tds[0].style.backgroundColor='green'; tds[1].style.backgroundColor='green'; }else if (result==3) {//强 tds[0].style.backgroundColor='blue'; tds[1].style.backgroundColor='blue'; tds[2].style.backgroundColor='blue'; } } } } function checkPwd(msg){ //判断含有数字字母特殊符号 var lvl = 0; if (msg.match(/[0-9]/)){ lvl++; } if (msg.match(/[a-zA-Z]/)) { lvl++; } if (msg.match(/[^0-9a-zA-Z]/)) { lvl++; } if (msg.length<6) { lvl--; } return lvl; } </script> </head> <body> <input type="text" name="name" id="txt" /> <table id="tb" border="1" style="width:300px;height:35px;text-align:center;background-color:gray"> <tr> <td> 弱 </td> <td> 中 </td> <td> 强 </td> </tr> </table> </body> </html>
Related recommendations:
JS regular expression to implement password strength verification function
Two JS regular expression methods to implement password strength
JavaScript password strength judgment code
The above is the detailed content of JS implements weak, medium and strong password display. For more information, please follow other related articles on the PHP Chinese website!