I have long been interested in how to make validators passwords, and I searched the Internet a lot of options, but could not find one which was short and clear + to be written in pure JS, I now want to share with my version of the code, may be for beginners will help.
In the past few years, I have been interested in writing my own password validator. At first, I thought it would be easy, but after some research and experimentation, I found out that there are many ways to validate passwords and each has its own advantages and disadvantages.
I did not want to use any third-party libraries or services because it would make the code harder to understand for beginners. Therefore, this article describes an implementation of a simple password validator written entirely in JavaScript without any external dependencies.
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h4 {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin-bottom: 5px;
}
#block {
width: 300px;
}
input {
display: block;
padding: 5px 10px;
margin-bottom: 5px;
width: 100%;
}
.status {
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 2px;
}
.status div {
padding: 5px;
}
HTML
<div id="block">
<h4>Parolni mukammaligi</h4>
<input type="text" placeholder="Enter password">
<div class="status">
<div class="status_bar"></div>
<div class="status_bar"></div>
<div class="status_bar"></div>
<div class="status_bar"></div>
</div>
</div>
JS
let input = document.querySelector('input')
let bars = document.querySelectorAll('.status_bar')
function check_lower_case(x) {
for (let i of x) {
if ("abcdefghijklmnopqrstuvwxyz".includes(i)) {
return 1
}
}
return 0
}
function check_upper_case(x) {
for (let i of x) {
if ("ABCDEFGHIJKLMNOPQRSTUVWXYZ".includes(i)) {
return 1
}
}
return 0
}
function check_digits(x) {
for (let i of x) {
if ("0123456789".includes(i)) {
return 1
}
}
return 0
}
function check_spec_char(x) {
for (let i of x) {
if ("!@#$%^&*()-+".includes(i)) {
return 1
}
}
return 0
}
input.addEventListener('input', ()=> {
let point = 0
point += check_lower_case(input.value)
point += check_upper_case(input.value)
point += check_digits(input.value)
point += check_spec_char(input.value)
if (point == 4) {
bars[0].style.backgroundColor = 'green'
bars[1].style.backgroundColor = 'green'
bars[2].style.backgroundColor = 'green'
bars[3].style.backgroundColor = 'green'
} else if (point == 3) {
bars[0].style.backgroundColor = 'yellow'
bars[1].style.backgroundColor = 'yellow'
bars[2].style.backgroundColor = 'yellow'
bars[3].style.backgroundColor = 'transparent'
} else if (point == 2) {
bars[0].style.backgroundColor = 'orange'
bars[1].style.backgroundColor = 'orange'
bars[2].style.backgroundColor = 'transparent'
bars[3].style.backgroundColor = 'transparent'
} else if (point == 1) {
bars[0].style.backgroundColor = 'red'
bars[1].style.backgroundColor = 'transparent'
bars[2].style.backgroundColor = 'transparent'
bars[3].style.backgroundColor = 'transparent'
} else {
bars[0].style.backgroundColor = 'transparent'
bars[1].style.backgroundColor = 'transparent'
bars[2].style.backgroundColor = 'transparent'
bars[3].style.backgroundColor = 'transparent'
}
})
Top comments (0)