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

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>

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

Javascript:

Importieren Sie die erforderlichen Klassenbibliotheken, einschließlich:

adee6b954974400c1672f77a41e28c80fc3e026ad8caaeed1a3118423ba62b3b
b681de22464b36c39819c2297d02fe9f2cacc6d41bbb37262a98f745aa00fbf0
54393b43573870439f3cbc36f433acf32cacc6d41bbb37262a98f745aa00fbf0
784f8e7c1d7dc5dda788a9118c60c1e72cacc6d41bbb37262a98f745aa00fbf0
f519803f665c7dd3a76f1b27285adfeb2cacc6d41bbb37262a98f745aa00fbf0

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

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

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

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.