パスワードの強さチェッカーのHTML
10076 ワード
こんにちは、友人、今日このブログでは、我々は、HTML、CSS、およびJavaScriptのパスワード強度チェッカーを作成する方法を学びます.前のブログでhow to create a random password generator in HTML, CSS, and Javascript . 今ではパスワードの強さチェッカーを作成する時間です.興味があれば、他のJavaScriptプロジェクトをチェックできますhere .
パスワード強度チェッカーは、ユーザーが入力したパスワードをチェックし、パスワードの強さを示すこともパスワードがハッカーによってハッキングできないことを示します.これは、ユーザーは、シンボル、数字、大文字、小文字の完全な組み合わせを含むパスワードを入力をチェックメーターがあります.
Custom Video Player Design Responsive Accordion Design Cool Button with Background Animation How to Detect User Location using Javascript このデザイン[パスワード強度チェッカー]には、コンテナと箱があります.その中には、タイトルと入力ボックスがあります.入力を開始するとパスワードの強度に応じて入力とメッセージの色を変更します.これは、パスワードを表示または非表示のトグルもあります.
あなたが私が何を言おうとしているか理解している困難を感じているならば?だから、ソースコードをチェックし、同様にプレビューできます.
ここでPassword strength checker
パスワード強度チェッカーは、ユーザーが入力したパスワードをチェックし、パスワードの強さを示すこともパスワードがハッカーによってハッキングできないことを示します.これは、ユーザーは、シンボル、数字、大文字、小文字の完全な組み合わせを含むパスワードを入力をチェックメーターがあります.
閉じるこの動画はお気に入りから削除されています
あなたが私が何を言おうとしているか理解している困難を感じているならば?だから、ソースコードをチェックし、同様にプレビューできます.
ここでPassword strength checker
HTMLコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password Strength Checker - InCoder</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body>
<div class="checkerContainer">
<h1 class="title">password strength checker</h1>
<div class="form-group" data-placeholder="Password">
<input type="password" id="passwordChecker">
<span class='passTypeToggle' title="Show"><i class="fa-solid fa-eye"></i></span>
</div>
<div class="message"></div>
</div>
<script src="script.js"></script>
</body>
</html>
CSSコード
/* --------------------- Created By InCoder --------------------- */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
background-color: rgb(0 0 0 / 85%);
}
.checkerContainer {
width: 25rem;
margin: 1rem;
display: flex;
align-items: center;
border-radius: 0.6rem;
flex-direction: column;
justify-content: center;
background: rgb(0 0 0 / 35%);
box-shadow: 0 0 20px rgb(76 76 76 / 33%);
}
.checkerContainer .title {
color: #ccc;
margin-top: 0.8rem;
margin-bottom: 0.8rem;
font-size: clamp(1rem, 4vw, 1.6rem);
}
.checkerContainer .form-group {
height: 2.6rem;
display: flex;
position: relative;
align-items: center;
justify-content: center;
width: calc(100% - 4rem);
}
.checkerContainer .form-group #passwordChecker {
width: 100%;
height: 100%;
outline: none;
font-size: 1rem;
margin-top: 0.2rem;
color: #ccccccbd;
position: relative;
letter-spacing: 1px;
border-radius: 0.4rem;
background: transparent;
padding: 0 2rem 0 0.5rem;
border: 3px solid #3b3b3b;
transition: background 0.19s ease-in-out;
}
.checkerContainer .passTypeToggle {
top: 50%;
right: 4%;
display: none;
font-size: 18px;
cursor: pointer;
color: #ccccccbd;
position: absolute;
transform: translate(10%, -50%);
font-family: "Font Awesome 5 Free";
}
.checkerContainer .form-group::before {
left: 0;
top: 50%;
z-index: 1;
padding: 0 4px;
font-size: 14px;
user-select: none;
color: #ccccccbd;
position: absolute;
pointer-events: none;
content: attr(data-placeholder);
transform: translate(15%, -50%);
transition: transform .2s ease-in-out;
}
.checkerContainer .form-group.focus::before {
background: #191919;
transform: translate(15%, -130%);
}
.checkerContainer .form-group #passwordChecker:focus label {
color: #fff;
}
.checkerContainer .form-group.weak #passwordChecker {
color: rgb(239, 68, 68);
border: 2px solid rgb(239, 68, 68);
}
.checkerContainer .form-group.weak::before{
color: rgb(239, 68, 68);
}
.checkerContainer .form-group.medium #passwordChecker {
color: rgb(251, 191, 36);
border: 2px solid rgb(251, 191, 36);
}
.checkerContainer .form-group.medium::before{
color: rgb(251, 191, 36);
}
.checkerContainer .form-group.strong::before{
color: rgb(34, 197, 94);
}
.checkerContainer .message.weak {
color: rgb(239, 68, 68) !important;
}
.checkerContainer .message.medium {
color: rgb(251, 191, 36) !important;
}
.checkerContainer .form-group.strong #passwordChecker {
color: rgb(34, 197, 94);
border: 2px solid rgb(34, 197, 94);
}
.checkerContainer .message.strong {
color: rgb(34, 197, 94) !important;
}
.checkerContainer .form-group input:focus {
background: #4f4b4b;
}
.checkerContainer .message {
margin-top: 0.4rem;
color: #ccccccbd;
margin-bottom: 0.8rem;
}
ジャバスクリプトコード
let input = document.querySelector('#passwordChecker')
let formGroup = document.querySelector('.form-group')
let message = document.querySelector('.message')
let passTypeToggle = document.querySelector('.passTypeToggle')
let strongPassword = new RegExp('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{8,})')
let mediumPassword = new RegExp('((?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{6,}))|((?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9])(?=.{8,}))')
document.body.addEventListener('click', function (e) {
if (input.contains(e.target)) {
formGroup.classList.add('focus')
} else {
if(input.value == ''){
formGroup.classList.remove('focus')
}
}
});
let checkPasswordStrength = (password) => {
let message = {}
if(strongPassword.test(password)) {
message = {
strength : 'strong'
}
} else if(mediumPassword.test(password)) {
message = {
strength : 'medium'
}
} else {
message = {
strength : 'weak'
}
}
return message
}
input.addEventListener('keyup', e => {
let password = e.target.value
password != "" ? passTypeToggle.style.display = 'block' : passTypeToggle.style.display = 'none'
if(password == ''){
message.classList.remove('weak')
message.classList.remove('medium')
message.classList.remove('strong')
formGroup.classList.remove('weak')
formGroup.classList.remove('medium')
formGroup.classList.remove('strong')
message.innerHTML = ''
}else{
let result = checkPasswordStrength(password)
if(result.strength == 'weak'){
message.classList.remove('medium')
message.classList.remove('strong')
formGroup.classList.remove('medium')
formGroup.classList.remove('strong')
message.classList.add('weak')
formGroup.classList.add('weak')
message.innerHTML = 'Your Password is weak.'
}else if(result.strength == 'medium'){
formGroup.classList.remove('weak')
formGroup.classList.remove('strong')
message.classList.remove('weak')
message.classList.remove('strong')
message.classList.add('medium')
formGroup.classList.add('medium')
message.innerHTML = 'Your Password is medium.'
}else{
formGroup.classList.remove('weak')
formGroup.classList.remove('medium')
message.classList.remove('weak')
message.classList.remove('medium')
message.classList.add('strong')
formGroup.classList.add('strong')
message.innerHTML = 'Your Password is Strong.'
}
}
})
passTypeToggle.addEventListener('click', e => {
input.getAttribute('type') == 'password' ? input.setAttribute('type', 'text') : input.setAttribute('type', 'password')
input.getAttribute('type') == 'password' ? passTypeToggle.setAttribute('title', 'Show') : passTypeToggle.setAttribute('title', 'Hide')
document.querySelector('.passTypeToggle i').classList.toggle('fa-eye')
document.querySelector('.passTypeToggle i').classList.toggle('fa-eye-slash')
})
Reference
この問題について(パスワードの強さチェッカーのHTML), 我々は、より多くの情報をここで見つけました https://dev.to/incoderweb/password-strength-checker-in-html-css-and-javascript-1oh4テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol