JQ技術(shù)實(shí)現(xiàn)注冊(cè)頁(yè)面帶有校驗(yàn)密碼強(qiáng)度

更新時(shí)間：2015年07月27日 15:21:11 作者：super1234

這篇文章主要介紹了JQ技術(shù)實(shí)現(xiàn)注冊(cè)頁(yè)面帶有校驗(yàn)密碼強(qiáng)度,需要的朋友可以參考下

主要介紹使用jQuery實(shí)現(xiàn)帶有校驗(yàn)密碼強(qiáng)度的注冊(cè)頁(yè)面，當(dāng)然要想生成一個(gè)漂亮的帶有密碼強(qiáng)度檢驗(yàn)的注冊(cè)頁(yè)面要有相關(guān)插件和類(lèi)庫(kù)配合，具體內(nèi)容如下：

相關(guān)的插件和類(lèi)庫(kù)

complexify - 一個(gè)密碼強(qiáng)度檢驗(yàn)jQuery插件
justgage - 一個(gè)兼容性良好的儀表盤(pán)類(lèi)庫(kù)
主要功能

注冊(cè)中包含一個(gè)密碼強(qiáng)度檢驗(yàn)組件，用戶(hù)需要設(shè)置一定強(qiáng)度的密碼才可以注冊(cè)
密碼強(qiáng)度使用儀表盤(pán)類(lèi)庫(kù)justgage來(lái)顯示，不同的強(qiáng)度的密碼將顯示不同的顏色
密碼強(qiáng)度符合要求后，顯示注冊(cè)按鈕
代碼說(shuō)明

HTML：

<div id="page-wrap">
<div id="title">注冊(cè)新賬號(hào) - gbtags.com</div>
<p>
<input type="text" name="email" id="email" placeholder="電子郵件"/>
</p>
<p>
<input type="password" name="password" id="password" placeholder="輸入密碼"/>
</p>
<div id="complexity"></div>
<p>
<input type="button" name="submit" id="submit" value="注冊(cè)" />
</p>
<p id="msgbox"></p>
</div>

添加電子郵件和密碼輸入框，及其密碼強(qiáng)度組件。

Javascript：

導(dǎo)入所需的類(lèi)庫(kù)，包括：

<script src=">
<script src="js/jquery.complexify.js"></script>
<script src="js/jquery.placeholder.min.js"></script>
<script src="js/raphael.2.1.0.min.js"></script>
<script src="js/justgage.1.0.1.min.js"></script>

以下為生成儀表盤(pán)及其密碼強(qiáng)度代碼：

$(function(){
$('#submit').attr('disabled', true);
var g1 = new JustGage({
id: "complexity",
value: 0,
min: 0,
max: 100,
title: "密碼強(qiáng)度提示",
titleFontColor: '#9d7540',
valueFontColor : '#CCCCCC',
label: "points",
levelColors: [
"#dfa65a",
"#926d3b",
"#584224"
]
});
$('input[placeholder]').placeholder();
$("#password").complexify({}, function(valid, complexity){
if(valid){
$('#submit').fadeIn();
}else{
$('#submit').fadeOut();
}
g1.refresh(Math.round(complexity));
});
$('#submit').click(function(){
$('#msgbox').html('welcome to gbtags.com');
});
});

以上代碼中，我們使用JustGage生成需要的儀表盤(pán)。相關(guān)選項(xiàng)請(qǐng)參考代碼。

以下代碼中，我們使用complexify的回調(diào)方法來(lái)判斷用戶(hù)輸入的密碼強(qiáng)度是否符合要求：

$("#password").complexify({}, function(valid, complexity){
if(valid){
$('#submit').fadeIn();
}else{
$('#submit').fadeOut();
}
g1.refresh(Math.round(complexity));
});

如果符合則顯示注冊(cè)按鈕，否則隱藏。同時(shí)刷新儀表盤(pán)的數(shù)值和顏色。

CSS代碼：

body{
background: url('../images/body.png');
}
 
#container{
background: url('../images/bg.jpg');
padding: 30px;
margin-top: 150px;
box-shadow: 0px 0px 30px #9d7540;
border-radius: 5px 5px 0px 0px;
}
 
#page-wrap{
margin: 0 auto;
width: 310px;
text-align: center;
font-size: 14px;
padding:0px;
font-family: Arial;
}
 
P{
margin: 20px 0;
padding:0;
}
 
#title{
width: 292px;
margin: 20px 0;
font-size: 14px;
font-weight: normal;
font-family: Arial;
color: #a27942;
text-align:left;
border-left: 4px solid #6e522d;
border-right: 6px solid #303030;
border-radius: 5px;
padding: 12px 5px;
background: #303030;
box-shadow: 0px 0px 10px #4f3b20;
}
 
#msgbox{
color: #808080;
}
 
input{
width: 300px;
height: 40px;
box-shadow: 0px 0px 10px #4f3b20;
border-radius: 5px;
font-size: 14px;
font-weight: normal;
margin:0;
padding: 0 5px;
border: 1px solid #606060;
font-family: Arial;
background: #303030;
color: #CCC;
}
 
#complexity{
width: 302px;
padding: 5px 5px;
font-size: 18px;
font-weight: bold;
margin: 0px;
box-shadow: 0px 0px 10px #4f3b20;
border-radius: 5px;
color:#CCC;
background: #303030;
}
 
#submit{
display: none;
width: 310px;
}
 
#gbin1{
padding: 15px 0px;
text-align: center;
background: #101010;
color: #909090;
font-size:12px;
font-family: Arial;
border-radius: 0px 0px 5px 5px;
box-shadow: 0px 0px 20px #4f3b20;
}
 
#gbin1 a{
font-family: Arial;
font-size:12px;
color: #909090;
text-shadow: 1px 1px 25px #fff;
text-decoration: none;
}

通過(guò)相關(guān)類(lèi)庫(kù)和插件生成一個(gè)漂亮的帶有密碼強(qiáng)度檢驗(yàn)的注冊(cè)頁(yè)面，使用JQ技術(shù)實(shí)現(xiàn)此功能，希望大家能夠喜歡。

您可能感興趣的文章: