本文实例为大家分享了jQuery密码强度验证控件，供大家参考，具体内容如下
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="https://www.jb51.net/jquery-1.12.1.js"></script> <style type="text/css"> .mainPrompt { border: #999 solid 1px; border-radius: 13px; overflow: hidden; padding: 1px 2px; display: inline-block; height: 20px; } .listPrompt { float: left; height: 20px; width: 56px; margin-right: 2px; background-color: #eeeeee; } .bot_text span { width: 52px; text-align: center; display: inline-block; line-height: 18px; } </style> </head> <body> <br/> <div> <p> 新密码请至少使用字母、数字、符号两种<br/>类型组合的密码，长度为6~20位。</p> <input type="text"/ placeholder="请输入密码"> <div> <div bgcolor="#f5f5f5"> <div> </div> <div> </div> <div> </div> </div> <div> <span>低</span> <span> 中</span> <span>高</span> </div> </div> <div> <script type="text/javascript"> function JudgyPwdLevel(pwdStr) { var hasNumber = 0; var hasLetter = 0; var hasSymbol = 0 if (pwdStr.length >= 6) { for (var i = 0; i < pwdStr.length; i++) { var item = pwdStr[i]; if (item >= '0' && item <= '9') { hasNumber = 1; } else if ((item >= 'a' && item <= "z") || (item >= 'A' && item < "Z")) { hasLetter = 1; } else { hasSymbol = 1; } } } return hasLetter + hasNumber + hasSymbol; } //显示颜色 function pwStrength(pwd) { O_color = "#eeeeee"; L_color = "#FF0000"; M_color = "#FF9900"; H_color = "#33CC00"; if (pwd == null || pwd == '') { Lcolor = Mcolor = Hcolor = O_color; } else { S_level = JudgyPwdLevel(pwd); switch (S_level) { case 0: Lcolor = Mcolor = Hcolor = O_color; case 1: Lcolor = L_color; Mcolor = Hcolor = O_color; break; case 2: Lcolor = L_color; Mcolor = M_color; Hcolor = O_color; break; default: Lcolor = L_color; Mcolor = M_color; Hcolor = H_color; } } document.getElementById("strength_L").style.background = Lcolor; document.getElementById("strength_M").style.background = Mcolor; document.getElementById("strength_H").style.background = Hcolor; return; } $("#txtPassword").keyup(function(e){ pwStrength($(e.target).val()); }); </script> </body> </html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章: