JQ 기술은 비밀번호 강도 검증을 사용하여 등록 페이지를 구현합니다_jquery

비밀번호 강도 확인 기능이 있는 등록 페이지를 구현하기 위해 jQuery를 사용하는 방법을 주로 소개합니다. 물론 비밀번호 강도 확인 기능이 있는 아름다운 등록 페이지를 생성하려면 관련 플러그인과 클래스 라이브러리를 사용해야 합니다. 다음과 같습니다:

관련 플러그인 및 라이브러리

complexify - 비밀번호 강도 검사 jQuery 플러그인
justgage - 호환성이 좋은 대시보드 클래스 라이브러리
주요 기능

등록에는 비밀번호 강도 확인 구성 요소가 포함됩니다. 사용자는 등록하기 전에 특정 강도의 비밀번호를 설정해야 합니다
비밀번호 강도는 대시보드 클래스 라이브러리 justgage를 사용하여 표시됩니다. 강도가 다른 비밀번호는 다른 색상으로 표시됩니다
비밀번호 강도가 요구 사항을 충족하면 등록 버튼이 표시됩니다
코드 설명

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>

비밀번호 강도 구성요소와 함께 이메일 및 비밀번호 입력 상자를 추가합니다.

자바스크립트:

다음을 포함하여 필수 클래스 라이브러리를 가져옵니다.

adee6b954974400c1672f77a41e28c80fc3e026ad8caaeed1a3118423ba62b3b
b681de22464b36c39819c2297d02fe9f2cacc6d41bbb37262a98f745aa00fbf0
54393b43573870439f3cbc36f433acf32cacc6d41bbb37262a98f745aa00fbf0
784f8e7c1d7dc5dda788a9118c60c1e72cacc6d41bbb37262a98f745aa00fbf0
f519803f665c7dd3a76f1b27285adfeb2cacc6d41bbb37262a98f745aa00fbf0

다음은 대시보드와 비밀번호 강도를 생성하는 코드입니다.

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

위 코드에서는 JustGage를 사용하여 필수 대시보드를 생성했습니다. 관련 옵션은 코드를 참고해주세요.

다음 코드에서는 complexify의 콜백 메서드를 사용하여 사용자가 입력한 비밀번호 강도가 요구 사항을 충족하는지 확인합니다.

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

일치하면 등록버튼이 표시되고, 일치하지 않으면 숨겨집니다. 대시보드의 값과 색상을 동시에 새로 고칩니다.

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

관련 클래스 라이브러리 및 플러그인을 통해 비밀번호 강도 확인 기능을 갖춘 아름다운 등록 페이지를 생성하고 JQ 기술을 사용하여 이 기능을 구현하면 좋겠습니다.