JS实现密码弱中强显示
程序员文章站
2022-04-14 17:46:33
...
本文主要和大家分享JS实现密码弱中强显示,主要以代码的方式和大家分享,希望能帮助到大家。
<!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>
相关推荐:
以上就是JS实现密码弱中强显示的详细内容,更多请关注其它相关文章!