利用jquery实现密码强度百分比



21 83 28



特效描述:利用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

加群请备注:从官网了解到