JQ Technology Implementation registration page with check password strength _jquery

The main introduction to the use of jquery with the verification of the password strength of the registration page, of course, to generate a beautiful password strength test with the registration page to have the relevant Plug-ins and class library, the specific contents are as follows:

Related Plug-ins and class libraries

Complexify-A cryptographic strength test jquery Plugin
Justgage-A good Compatibility instrument panel class Library
Main function

Registration contains a password strength test component, the user needs to set a certain strength of the password can be registered
Password strength using the Dashboard class library justgage to show that the different strength of the password will display a different color
Display the registration button after the password strength meets the requirements
Code description

HTML:

<div id= "Page-wrap" >
<div id= "title" > Register new Account-gbtags.com</div>
<p>
<input type= "text" name= "email" id= "email" placeholder= "e-mail"/>
</p>
<p>
<input type= "password" name= "password" id= "password" placeholder= "input password"/>
</p>
<div id= "Complexity" ></div>
<p>
<input type= "button" name= "Submit" id= "submit" value= "register"/>
</p >
<p id= "MsgBox" ></p>
</div>

Add e-mail and password input boxes, and their password strength components.

Javascript:

Import the required class libraries, including:

<script src= " http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js "></script >
<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>

The following is the build dashboard and its password strength code:

$ (function () {
$ (' #submit '). attr (' disabled ', true);
var g1 = new Justgage ({
ID: "Complexity",
value:0, min:0, max:100,
title: "Password strength hint",
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 the relevant options.

In the following code, we use the Complexify 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));

Displays the registration button if it is compliant, otherwise hidden. Refresh the value and color of the dashboard at the same time.

CSS code: 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:nor
Mal
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; bo
rder-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;}

Through the relevant class library and Plug-ins to generate a beautiful password strength test with the registration page, using JQ technology to achieve this function, I hope you can enjoy.