标签：
一个简单的判断密码强度的小例子。
密码强度等级设定:
弱：纯字母或者纯数字组成
中：数字与字母混合组成
高：数字，字母，符号三者混合组成
这部分的js代码：
$(‘#pass‘).keyup(function(e) { // 最强的正则表达式：8位 大小写字母 数字 符号 var strongRegex = new RegExp("^(?=.{8,})(?=.*[a-zA-Z])(?=.*[0-9])(?=.*\\W).*$", "g"); // 中等强度 ： 7位 大小写字母或者大写字母数字混合或者小写字母数字混合 var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g"); // 弱密码强度 ： 6位 纯数字 var enoughRegex = new RegExp("(?=.{6,}).*", "g"); if (false == enoughRegex.test($(this).val())) { $(‘#passstrength‘).html(‘密码长度至少6位‘); } else if (strongRegex.test($(this).val())) { $(‘#passstrength‘).html(‘密码强度:强!‘); strong(); } else if (mediumRegex.test($(this).val())) { $(‘#passstrength‘).html(‘密码强度:中等!‘); medium(); } else { $(‘#passstrength‘).html(‘密码强度:弱!‘); week(); } return true; });
然后对密码的不同强度分别设置css样式，结果：
下面附上全部html内容：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>password strangth validate</title> <script src="jquery-1.8.3.min.js"></script> </head> <style> .form{ width: 500px; height: 200px; margin: 100px auto; border: 1px solid #ddd; border-bottom: 3px solid #ddd; border-right: 2px solid #ddd; border-radius: 10px; background-color: rgba(0,0,0,.1); text-align: center; } .form input{ margin-top: 70px; height: 30px; width: 200px; border: none; border-radius: 5px; border:1px solid #ddd; text-indent: 10px; color: #666; } .form .grade3{ width: 195px; height: 10px; margin: 5px auto; position: relative; } .form .grade3 .grade{ width: 60px; height: 100%; border: 1px solid #fff; margin-right: 3px; float: left; } .form .grade3 .yellow{ background-color: #E38D33; } .form .grade3 .green{ background-color: #6DBD2E; } .form .grade3 .red{ background-color: #EE5E59; } #passstrength{ color: #666; position: absolute; top: 0px; left:0; font-size: 10px; line-height: 20px; font-family: ‘微软雅黑‘; } </style> <body> <div class="form"> <input type="password" name="pass" id="pass" /> <div class="grade3"> <div class="grade g1 "></div> <div class="grade g2 "></div> <div class="grade g3 "></div> <p id="passstrength"></p> </div> </div> </body> <script type="text/javascript"> $(‘#pass‘).keyup(function(e) { // 最强的正则表达式：8位 大小写字母 数字 符号 var strongRegex = new RegExp("^(?=.{8,})(?=.*[a-zA-Z])(?=.*[0-9])(?=.*\\W).*$", "g"); // 中等强度 ： 7位 大小写字母或者大写字母数字混合或者小写字母数字混合 var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g"); // 弱密码强度 ： 6位 纯数字 var enoughRegex = new RegExp("(?=.{6,}).*", "g"); if (false == enoughRegex.test($(this).val())) { $(‘#passstrength‘).html(‘密码长度至少6位‘); } else if (strongRegex.test($(this).val())) { $(‘#passstrength‘).html(‘密码强度:强!‘); strong(); } else if (mediumRegex.test($(this).val())) { $(‘#passstrength‘).html(‘密码强度:中等!‘); medium(); } else { $(‘#passstrength‘).html(‘密码强度:弱!‘); week(); } return true; }); function week (argument) { $(‘.g1,.g2‘).removeClass(‘yellow‘); $(‘.g1,.g2,.g3‘).removeClass(‘green‘); $(‘.g1‘).addClass(‘red‘); } function medium (argument) { $(‘.g1‘).removeClass(‘red‘); $(‘.g1,.g2,.g3‘).removeClass(‘green‘); $(‘.g1,.g2‘).addClass(‘yellow‘); } function strong (argument) { $(‘.g1‘).removeClass(‘red‘); $(‘.g1,.g2‘).removeClass(‘yellow‘); $(‘.g1,.g2,.g3‘).addClass(‘green‘); } </script> </html>
注：jquery库自备。
标签：
原文地址：http://www.cnblogs.com/Imever/p/4580295.html
