首先，我们来了解下按位或运算：将进行按位或运算的两个变量先转换为2进制，然后进行按位运算。
比如： 2|4
2对应的2进制 0010
4对应的2进制 0100
按位或运算 0110=6
这时，我们发现，转换为2进制后，对应的上下两位中，只要有1位为1，结果就是为1，这也是按位或运算的准则。而结果刚好是2+4=6。
这时，我们再来看看 6|2
6对应的2进制 0110
2对应的2进制 0010
按位或运算 0110=6
这时，我们发现，只要前面使用按位或运算过的数值（这里的2），再次使用其进行按位或运算时，结果不变（这里仍然为6）。利用这一特性，我们就可以实现密码强度值的运算
接下来我们需要用到正则表达式来校验输入的每一个字符，所以需要对正则表达式有一定了解：
匹配0-9的正则表达式 [0-9]
匹配小写字符的正则表达式 [a-z]
匹配大写字符的正则表达式 [A-Z]
有了这些正则表达式，我们就可以编写代码了，具体如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>密码强度</title> <style> .qiangdu{ height: 17px; width: 54px; background: gray; display: inline-block; font-size: 10px; text-align: center; } .active{ background: green; } </style> </head> <body> <div> <input type="text" id="pw"> <div class="qiangdu-box"> <div class="qiangdu">弱</div> <div class="qiangdu">中</div> <div class="qiangdu">强</div> </div> </div> </body> <script type="text/javascript" src="js/jquery-2.1.4.js" ></script> <script> $('#pw').on('keyup',function(){//添加键盘按键监听事件，当按键松开时做事 var value = $(this).val();//取出输入框的值 //当输入框未进行输入时清除所有密码强度显示 if(value == undefined || value == ''){ $(".qiangdu").removeClass("active"); return; } var weight = 0;//密码强度值默认是0 for(var i=0; i<value.length; i++){ var c = value.substring(i, i+1);//循环取出每一个字符 var reg1 = /[0-9]/;//正则表达式，匹配数字 var reg2 = /[a-z]/;//正则表达式，匹配小写字符 var reg3 = /[A-Z]/;//正则表达式，匹配大写字符 if(reg1.test(c)){ //进行按位或运算，如果下一个字符还是数字， //再与2进行按位或运算，就不会改变密码强 //度的值，后面的运算，原理一致 weight |= 2;//如果是数字，强度值+2 } else if(reg2.test(c)){ weight |= 4;//如果是小写字符，强度值+4 } else if(reg3.test(c)){ weight |= 8;//如果是大写字符，强度值+8 } else { weight |= 16;//如果是特殊字符，强度值+16 } } //强度值0-10为弱，10-20为中，>20为强 if(weight > 0 && weight <= 10){ //强度值为弱时，清除所有已激活的强度显示 $(".qiangdu").removeClass("active"); //将强度弱显示出来 $(".qiangdu:eq(0)").addClass("active"); } else if(weight > 10 && weight <= 20){ //强度值为中时，清除所有已激活的强度显示 $(".qiangdu").removeClass("active"); //将强度弱显示出来 $(".qiangdu:eq(0)").addClass("active"); //将强度中显示出来 $(".qiangdu:eq(1)").addClass("active"); } else { //强度值为中时，清除所有已激活的强度显示 $(".qiangdu").removeClass("active"); //将所有强度显示出来 $(".qiangdu").addClass("active"); } }); </script> </html> 代码注释很详细，这里就不多说，希望对大家有所帮助