Die JQ-Technologie implementiert eine Registrierungsseite mit der Überprüfung der Passwortstärke

Die JQ-Technologie implementiert eine Registrierungsseite mit der Überprüfung der Passwortstärke_jquery

WBOY

Freigeben： 2016-05-16 15:48:53

Original

1340 Leute haben es durchsucht

Einführung in die Verwendung von jQuery zur Implementierung einer Registrierungsseite mit Überprüfung der Passwortstärke. Um eine schöne Registrierungsseite mit Überprüfung der Passwortstärke zu erstellen, müssen natürlich relevante Plug-Ins und Klassenbibliotheken verwendet werden wie folgt:

Verwandte Plug-ins und Bibliotheken

complexify – ein jQuery-Plugin zur Überprüfung der Passwortstärke
justgage – eine Dashboard-Klassenbibliothek mit guter Kompatibilität
Hauptfunktionen

Die Registrierung umfasst eine Komponente zur Überprüfung der Passwortstärke. Benutzer müssen ein Passwort mit einer bestimmten Stärke festlegen, bevor sie sich registrieren können
Die Passwortstärke wird mithilfe der Dashboard-Klassenbibliothek angezeigt. Passwörter mit unterschiedlichen Stärken werden in verschiedenen Farben angezeigt
Nachdem die Passwortstärke den Anforderungen entspricht, wird die Registrierungsschaltfläche angezeigt
Codebeschreibung

HTML：

<div id="page-wrap">
<div id="title">注册新账号 - 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="注册" />
</p>
<p id="msgbox"></p>
</div>

Nach dem Login kopieren

Fügen Sie E-Mail- und Passwort-Eingabefelder sowie deren Passwortstärkekomponenten hinzu.

Javascript:

Importieren Sie die erforderlichen Klassenbibliotheken, einschließlich:

Das Folgende ist der Code zum Generieren des Dashboards und seiner Passwortstärke:

$(function(){
$('#submit').attr('disabled', true);
var g1 = new JustGage({
id: "complexity",
value: 0,
min: 0,
max: 100,
title: "密码强度提示",
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');
});
});

Nach dem Login kopieren

Im obigen Code verwenden wir JustGage, um das erforderliche Dashboard zu generieren. Die zugehörigen Optionen finden Sie im Code.

Im folgenden Code verwenden wir die Callback-Methode von complexify, um zu ermitteln, ob die vom Benutzer eingegebene Passwortstärke den Anforderungen entspricht:

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

Nach dem Login kopieren

Bei Übereinstimmung wird der Registrierungsbutton angezeigt, andernfalls wird er ausgeblendet. Aktualisieren Sie gleichzeitig die Werte und Farben des Dashboards.

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;
}

Nach dem Login kopieren

Generieren Sie mithilfe relevanter Klassenbibliotheken und Plug-Ins eine schöne Registrierungsseite mit Überprüfung der Passwortstärke und implementieren Sie diese Funktion hoffentlich jedem.