La technologie JQ implémente une page d'inscription avec vérification de la force du mot de passe_jquery

Présente principalement l'utilisation de jQuery pour implémenter une page d'inscription avec vérification de la force du mot de passe. Bien entendu, afin de générer une belle page d'inscription avec vérification de la force du mot de passe, le contenu spécifique doit être utilisé. comme suit :

Plug-ins et bibliothèques associés

complexify - un plugin jQuery vérifiant la force des mots de passe
justgage - une bibliothèque de classes de tableau de bord avec une bonne compatibilité
Fonctions principales

L'inscription comprend un composant de vérification de la force du mot de passe. Les utilisateurs doivent définir un mot de passe d'une certaine force avant de pouvoir s'inscrire
La force du mot de passe est affichée à l'aide de la bibliothèque de classes du tableau de bord justgage. Les mots de passe avec différentes forces seront affichés dans différentes couleurs
. Une fois que la force du mot de passe répond aux exigences, le bouton d'enregistrement s'affichera
Description du code

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>

Ajoutez des zones de saisie d'e-mail et de mot de passe, ainsi que leurs composants de force de mot de passe.

Javascript :

Importez les bibliothèques de classes requises, notamment :

Voici le code pour générer le tableau de bord et la force de son mot de passe :

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

Dans le code ci-dessus, nous utilisons JustGage pour générer le tableau de bord requis. Veuillez vous référer au code pour les options associées.

Dans le code suivant, nous utilisons la méthode de rappel de complexify pour déterminer si la force du mot de passe saisie par l'utilisateur répond aux exigences :

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

Si cela correspond, le bouton d'inscription sera affiché, sinon il sera masqué. Actualisez les valeurs et les couleurs du tableau de bord en même temps.

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

Générez une belle page d'inscription avec vérification de la force du mot de passe via les bibliothèques de classes et les plug-ins pertinents, et utilisez la technologie JQ pour implémenter cette fonction. J'espère que tout le monde l'appréciera.