Password Validation with JavaScript
Features:
- Validate input value with Regular Expressions
- Hide and show the password
- Toggle the images according to the validation
HTML
eyeToggle includes two images which are toggled in JavaScript.
The validation structure has 5 items for validation.
onkeyup validates the function checkPassword().
CSS
When coding the CSS, I find it’s hard to size the image inside :before.
Unable to resize images created using the ::before pseudo-element?
After searching, I found out it has to set up the background-size and also the block size. Look it up here.
The images are from flaticon:
JS
select all the DOM s
When clicking eyeToggle, if the input is the password, turn it into text showing the password and also show the eye open image. Likewise,
When onkeyup happens, run the functioncheckPassword()according to the data value.
Using Regular expressions for validation, lowerCase is [a-z],upperCase if [A-Z], number is [0–9], specials are the !@#$%^&*, length is larger than 8 as needed.
?=is a positive lookahead, a type of zero-width assertion. What it's saying is that the captured match must be followed by whatever is within the parentheses but that part isn't captured.
.*just means "0 or more of any character".It’s broken down into two parts:
.- a "dot" indicates any character
*- means "0 or more instances of the preceding regex token"
Add class valid when it’s qualified.
Hide the validation list first. When focusing on the input, show them.
I learned the JavaScript from online tutorials, here is the YouTube video.
My code below:
Keep up doing what you want. Say hi to all of us on the road to the peak.
Please follow and be my study buddy. Peace.✌️
