<!doctype html> <html> <head> <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script> <script type="text/javascript"> function getPasswordStrength(password){ var strength=0; $([/.{6,}/,/[0-9]+/,/[a-z]+/,/[A-Z]+/,/[^0-9a-zA-Z]+/]).each(function(i,o){ console.log(i,o,strength); if(o.test(password)) strength++; }); return strength; } function showStrength(password) { var strength = getPasswordStrength(password); var status = strength < 3 ? 'low' : (strength < 5 ? 'medium' : 'high'); var desc = strength < 3 ? '强度很低' : (strength < 5 ? '中等强度' : '高强度'); $('#passwordStrength').attr('class',status).html(desc); } </script> <style> /*密码强度样式的定义*/ .high{color:green} .medium{color:blue} .low{color:red} </style> </head> <body> <form> 密码： <input type="password" onkeyup="showStrength(this.value)"/> <span id="passwordStrength"></span> </form> </body> </html>