利用jquery實現密碼強度百分比



28 108 37



特效描述:利用jquery實現 密碼強度 百分比,利用jquery實現密碼強度百分比

代碼結構

1. 引入JS

<script src='js/jquery-1.7.2.min.js'></script>
<script src='js/jquery.complexify.js'></script>

2. HTML代碼

<h2></h2>
<br/>
<div id="demo">
<input type="password" id="password" placeholder="Password">
<div id="progressbar"><div id="progress"></div></div>
<div id="status">
<div id="complexity">0%</div>
<div id="complexityLabel">Complexity</div>
</div>
</div>
<br/>
<br/>
<script type="text/javascript">
$(function () {
$("#password").complexify({}, function (valid, complexity) {
if (!valid) {
$('#progress').css({'width':complexity + '%'}).removeClass('progressbarValid').addClass('progressbarInvalid');
} else {
$('#progress').css({'width':complexity + '%'}).removeClass('progressbarInvalid').addClass('progressbarValid');
}
$('#complexity').html(Math.round(complexity) + '%');
});
});
</script>
<style type="text/css">
#demo {
width:380px;
margin-right:auto;
margin-left:auto;
}
#progressbar {
width:388px;
height:48px;
display:block;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
border-top:1px solid #ccc;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
overflow:hidden;
background-color: white;
}
#progress {
display:block;
height:100px;
width:0%;
}
.progressbarValid {
background-color:green;
background-image: -o-linear-gradient(-90deg, #8AD702 0%, #389100 100%);
background-image: -moz-linear-gradient(-90deg, #8AD702 0%, #389100 100%);
background-image: -webkit-linear-gradient(-90deg, #8AD702 0%, #389100 100%);
background-image: -ms-linear-gradient(-90deg, #8AD702 0%, #389100 100%);
background-image: linear-gradient(-90deg, #8AD702 0%, #389100 100%);
}
.progressbarInvalid {
background-color:red;
background-image: -o-linear-gradient(-90deg, #F94046 0%, #92080B 100%);
background-image: -moz-linear-gradient(-90deg, #F94046 0%, #92080B 100%);
background-image: -webkit-linear-gradient(-90deg, #F94046 0%, #92080B 100%);
background-image: -ms-linear-gradient(-90deg, #F94046 0%, #92080B 100%);
background-image: linear-gradient(-90deg, #F94046 0%, #92080B 100%);
}
#status {
height:150px;
width:388px;
border:1px solid #ccc;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
background-color: white;
}
#password {
width:100%;
height:40px;
font-size:30px;
line-height:40px;
border-radius: 8px;
padding: 4px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
margin-bottom: 9px;
color: #555555;
border: 1px solid #cccccc;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-text-security: disc;
-webkit-appearance: textfield;
outline: none;
}
#complexityLabel {
width:100%;
text-align:center;
margin-top:10px;
font-size:20px;
line-height:30px;
}
#complexity {
width:100%;
text-align:center;
font-family:"Helvetica Neue", "Helvetica", Arial, sans-serif;
font-weight:bold;
font-size:70px;
line-height:80px;
margin-top:10px;
}
</style>
<div style="text-align:center;clear:both">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 切換按鈕 表單 表單美化 表單插件 表單美化插件 文本框 text文本框 密碼強度驗證
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 安徽十一选五开奖结果今天晚上 九乐棋牌官网 体彩七星彩预测 大发快三大小单双经验 现在dnf搬砖哪里最赚钱2018 华东15选5开奖查询 未来零成本赚钱 重庆时时彩全天计划 飞艇计划软件app 五分彩软件 福采东方6+1 佳彩国际网址 4399极速飞艇 qq分分彩规则 深圳风采35选7开奖走势图 微视拍视频赚钱真的吗