jquery实现的密码强度判断代码

jquery实现的密码强度判断代码:
在输入密码的时候,能够根据你密码的复杂程度给出一个密码强度提示,非常的人性化,下面就简单介绍一下使用jquery如何实现此功能,代码如下:

<!DOCTYPE html>
<html>
<head>
<title>密码强度提示效果</title> 
<style type="text/css"> 
.qiang{background:url(/images/pas4.JPG) no-repeat;width:150px;height:40px;float:left;} 
.zhong{background:url(/images/pas3.JPG) no-repeat;width:150px;height:40px;float:left;} 
.ruo{background:url(/images/pas2.JPG) no-repeat;width:150px;height:40px;float:left;} 
.ruox{background:url(/images/pas1.JPG) no-repeat;width:150px;height:40px;float:left;} 
.div1css{float:left;width:200px;} 
</style> 
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(function () { 
  $('#pass').keyup(function (){ 
    var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"); 
    var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g"); 
    var enoughRegex = new RegExp("(?=.{6,}).*", "g"); </P>
    if(false == enoughRegex.test($(this).val())) 
    { 
      $('#div2').addClass('ruox'); 
      //$('#passstrength').html('小于六位的时候'); //密码小于六位的时候,密码强度图片都为灰色 
    } 
    else if (strongRegex.test($(this).val())) 
    { 
      $('#div2').removeClass('zhong'); 
      $('#div2').addClass('qiang'); 
      //$('#passstrength').html('强!'); //密码为八位及以上并且字母数字特殊字符三项都包括 
    } 
    else if (mediumRegex.test($(this).val())) 
    { 
      $('#div2').removeClass('ruo'); 
      $('#div2').addClass('zhong'); 
      //$('#passstrength').html('中!'); //密码为七位及以上并且字母、数字、特殊字符三项中有两项,强度是中等 
    } 
    else 
    { 
      $('#div2').removeClass('ruox'); 
      $('#div2').addClass('ruo'); 
      //$('#passstrength').html('弱!'); //如果密码为6为及以下,就算字母、数字、特殊字符三项都包括,强度也是弱的 
    } 
    return true; 
  }) 
}) 
</script> 
</head> 
<body> 
<div id="div1" class="div1css"> 
<input type="password" name="pass" id="pass" /></div> 
<div id="div2"><span id="passstrength"></span></div> 
</body> 
</html>

以上代码功能是可用的,可能有朋友在演示的时候没有结果,是因为因为需要引用图片才行,看CSS代码就清楚了

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8168

更多内容可以参阅:http://www.softwhy.com/jquery/

你可能感兴趣的:(jquery实现的密码强度判断代码)