<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .lv0{ width: 10px; height: 5px; background-color:white; } .lv1{ width: 40px; height: 5px; background-color:red; } .lv2{ width: 80px; height: 5px; background-color:orangered; } .lv3{ width: 120px; height: 5px; background-color:green; } </style> </head> <body> <input type="password" id="pwd"><div id="lv"> <script> var pwd = document.getElementById("pwd"); var lv = document.getElementById("lv"); pwd.onkeyup = function () { var lvl = getPawLvl(this.value); if(pwd.value.length<6){ ; } else{ if(1==lvl){ lv.className="lv1"; }else if(2==lvl){ lv.className="lv2"; }else if(3==lvl){ lv.className="lv3"; }else{ lv.className = "lv0"; } } } function getPawLvl(password){ var lvl = 0; if(/[0-9]/.test(password)){ lvl++; } if(/[a-zA-Z_]/.test(password)){ lvl++; } if(/[^0-9a-zA-Z_]/.test(password)){ lvl++; } return lvl; } </script></body></html>
原文地址:https://www.cnblogs.com/programfield/p/11067774.html
时间: 2024-10-09 01:44:21