<html>
<!--激情在最后面。请看最后面红色字
这是是个计算password强度的实例
网上有非常多这种样例
只是呢，都不怎么好
这是我写的一个完整的效果，能够通用，
new一下就能够实例化一个【关注重点】，
主要是用面向对象来写，感觉知道做下笔记
password强度验证规则例如以下:
-->
<meta charset="UTF-8"><title>计算password强度</title>
<head></head>
<style>
span{
display: inline-block;
line-height: 20px;
text-align: center;
20px;
height:20px;
border-radius: 50%;
background:#ccc;
font-size: 12px;
color:#fff;
}
.current{
background:green;
color:#000;
}
</style>
<script src="jquery.js"></script>
<body>
<input type="text" id="test" class="input1">
<input type="submit" value="submit" id="submit"/>
<div class="vaild">
<span>弱</span>
<span>中</span>
<span>强</span>
</div>
<input type="text" id="test" class="input2">
<input type="submit" value="submit" id="submit"/>
<div class="vaild2">
<span>弱</span>
<span>中</span>
<span>强</span>
</div>
<script>
//构造函数
function Vaild(){
this.input=$(".input1"),
this.show=$(".vaild span"),
this.name="current",
this.vailded=function()
{
var _this=this;
this.input.on("keyup", function()
{
// var div=$("#fen");
//var tips=$("#tips");
var f=0;//每次都清空
var vals=$(this).val();
//数组
var num;
var en;
var fh;
var jl;
//得分
var lenF;
var numF;
var enF;
var fhF;
var jlF;
//推断长度
if(vals.length>0&&vals.length <=4){
lenF=5;
}
else if(vals.length>4&&vals.length<=7){
lenF=10;
}
else if(vals.length>=8){
lenF=25;
}
//推断数字
num=vals.match(/d/g)?vals.match(/d/g):0;
if(num==0){
numF=0;
}
else if(num.length==1){
numF=10;
}
else if(num.length>=2){
numF=20;
}
//推断字母长度
en=vals.match(/[A-Za-z_]/g)?
vals.match(/[A-Za-z_]/g):0;
if(en==0){
enF=0;
}
else if(en.length==1){
enF=10;
}
else if(en.length>=2){
enF=20;
}
//匹配符号
fh=vals.match(/W/g)?vals.match(/W/g):0;
if(fh==0){
fhF=0;
}
else if(fh.length==1){
fhF=10;
}
else if(fh.length>=2){
fhF=25;
}
//奖励
if(/d+/g.test(vals)&&/[a-z_]+/g.test(vals)){
jlF=2;
}
if(/d+/g.test(vals)&&/[a-z_]+/g.test(vals)&&/W+/g.test(vals)){
jlF=3;
}
if(/d+/g.test(vals)&&/[A-Z]+/g.test(vals)&&/[a-z_]+/g&&/W+/g.test(vals)){
jlF=5;
}
if(jlF==undefined||jlF=="NaN"||jlF=="undefined")
{
jlF=0;
}
var count=Number(lenF)+Number(numF)+Number(enF)+Number(fhF)+Number(jlF);
//切换“弱” “中” “强”
if(count>=0&&count<60){
_this.show.eq(0).addClass(_this.name).siblings().removeClass(_this.name);
}
else if(count<90&&count>=60){
_this.show.eq(2).removeClass(_this.name).siblings().addClass(_this.name);
}
else if(count>90){
_this.show.addClass(_this.name);
}
else{
_this.show.removeClass(_this.name);
}
//显示分数
// div.html("分数 : "+ count)
//測试多相应的所得分数
console.log("长度分数："+lenF)
console.log("数字分数："+numF)
console.log("字母分数: "+enF)
console.log("符号分数: "+fhF)
console.log("奖励分数: "+jlF)
})
}
};
///实例化构造函数
var dd=new Vaild();dd.vailded();
//开启第二个
var bb=new Vaild();
bb.input=$(".input2");
bb.show=$(".vaild2 span");
bb.vailded();
</script>
</body>
</html>