Teknologi JQ melaksanakan halaman pendaftaran dengan verification_jquery kekuatan kata laluan

Terutamanya memperkenalkan penggunaan jQuery untuk melaksanakan halaman pendaftaran dengan pengesahan kekuatan kata laluan Sudah tentu, untuk menghasilkan halaman pendaftaran yang indah dengan pengesahan kekuatan kata laluan, pemalam dan perpustakaan kelas yang berkaitan mesti digunakan seperti berikut:

Pemalam dan perpustakaan berkaitan

rumitkan - pemalam jQuery semakan kekuatan kata laluan
justgage - perpustakaan kelas papan pemuka dengan keserasian yang baik
Fungsi utama

Pendaftaran termasuk komponen pengesahan kekuatan kata laluan Pengguna perlu menetapkan kata laluan dengan kekuatan tertentu sebelum mereka boleh mendaftar
Kekuatan kata laluan dipaparkan menggunakan justgage perpustakaan kelas papan pemuka Kata laluan dengan kekuatan yang berbeza akan dipaparkan dalam warna yang berbeza
Selepas kekuatan kata laluan memenuhi keperluan, butang pendaftaran akan dipaparkan
Penerangan Kod

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>

Tambahkan kotak input e-mel dan kata laluan, bersama dengan komponen kekuatan kata laluannya.

Javascript:

Import perpustakaan kelas yang diperlukan, termasuk:

adee6b954974400c1672f77a41e28c801dc3afa1811d87927adb7b701eedbb8f
b681de22464b36c39819c2297d02fe9f2cacc6d41bbb37262a98f745aa00fbf0
54393b43573870439f3cbc36f433acf32cacc6d41bbb37262a98f745aa00fbf0
784f8e7c1d7dc5dda788a9118c60c1e72cacc6d41bbb37262a98f745aa00fbf0
f519803f665c7dd3a76f1b27285adfeb2cacc6d41bbb37262a98f745aa00fbf0

Berikut ialah kod untuk menjana papan pemuka dan kekuatan kata laluannya:

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

Dalam kod di atas, kami menggunakan JustGage untuk menjana papan pemuka yang diperlukan. Sila rujuk kod untuk pilihan yang berkaitan.

Dalam kod berikut, kami menggunakan kaedah panggil balik complexify untuk menentukan sama ada kekuatan kata laluan yang dimasukkan oleh pengguna memenuhi keperluan:

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

Jika ia sepadan, butang pendaftaran akan dipaparkan, jika tidak ia akan disembunyikan. Muat semula nilai dan warna papan pemuka pada masa yang sama.

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

Jana halaman pendaftaran yang cantik dengan pengesahan kekuatan kata laluan melalui perpustakaan kelas dan pemalam yang berkaitan, dan gunakan teknologi JQ untuk melaksanakan fungsi ini.