JQ technology implements registration page with password strength verification_jquery

Mainly introduces the use of jQuery to implement a registration page with password strength verification. Of course, in order to generate a beautiful registration page with password strength verification, relevant plug-ins and class libraries must be used. The specific content is as follows:

Related plug-ins and libraries

complexify - a password strength checking jQuery plugin
justgage - a dashboard class library with good compatibility
Main functions

Registration includes a password strength verification component. Users need to set a password of a certain strength before they can register
Password strength is displayed using the dashboard class library justgage. Passwords with different strengths will be displayed in different colors
After the password strength meets the requirements, the registration button will be displayed
Code Description

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>

Add email and password input boxes, along with their password strength components.

Javascript:

Import the required class libraries, including:

adee6b954974400c1672f77a41e28c80fc3e026ad8caaeed1a3118423ba62b3b
b681de22464b36c39819c2297d02fe9f2cacc6d41bbb37262a98f745aa00fbf0
54393b43573870439f3cbc36f433acf32cacc6d41bbb37262a98f745aa00fbf0
784f8e7c1d7dc5dda788a9118c60c1e72cacc6d41bbb37262a98f745aa00fbf0
f519803f665c7dd3a76f1b27285adfeb2cacc6d41bbb37262a98f745aa00fbf0

The following is the code to generate the dashboard and its password strength:

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

In the above code, we use JustGage to generate the required dashboard. Please refer to the code for related options.

In the following code, we use complexify’s callback method to determine whether the password strength entered by the user meets the requirements:

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

If it matches, the registration button will be displayed, otherwise it will be hidden. Refresh the values ​​and colors of the dashboard at the same time.

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

Generate a beautiful registration page with password strength verification through relevant class libraries and plug-ins, and use JQ technology to implement this function. I hope everyone will like it.