Contents
- Here is how to secure a password in front with JavaScript coupled with jQuery and regular expressions (Regex) :
- Password preview once secured with regular expressions (Regex) :
- Creating the input field :
- Creating the list for the required expressions in the password :
- Checking during entry password:
- Checking the password size :
- Checking for the presence of a number :
- Upper and lower case checking :
- Conclusion:
Here is how to secure a password in front with JavaScript coupled with jQuery and regular expressions (Regex) :
Do you want to check in front that the user has entered 8 characters, a number and or a capital letter? I will guide you through the procedure to follow.
To follow this procedure you need to have jQuery installed, it is not mandatory, but using it, you will not have the same code as me in native javascript.
In my case, I use the CSS Bulma library to do integration.
Password preview once secured with regular expressions (Regex) :
The progress bar is not taken into account in the tutorial but just give it a percentage of success on 100%.
Creating the input field :
Simple input field of type password, it is necessary to add an id to retrieve it easily in javascript.
<input type="password" id="password" name="password"/>
Creating the list for the required expressions in the password :
A list with as many li as you want to check with each one an id to find them.
<ul> <li id="size-password"></li> <li id="min-password"></li> <li id="maj-password"></li> <li id="digit-password"></li> </ul>
Checking during entry password:
Here’s the code needed to verify the password, I’ll detail everything.
Each time the key is “keyup” on the password input we do the verification.
$("#password").on("keyup", function () {
//If input not blank
if ($(this).val() != "") {
let size= $("#size-password");
size.children().remove();
size.text("");
let min = $("#min-password");
min.children().remove();
min.text("");
let maj = $("#maj-password");
maj.children().remove();
maj.text("");
let digit = $("#digit-password");
digit.children().remove();
digit.text("");
//Check at least 8 char
if (/^(.{8,})/.test($(this).val())) {
size.append('<i class="fas fa-check-circle is-font-primary"></i> At least 8 characters. (' + $(this).val().length + '/8)');
} else {
size.append('<i class="fas fa-times-circle is-font-danger"></i> At least 8 characters. (' + $(this).val().length + '/8)');
}
//Check one digit
if (/^(?=.*\d)/.test($(this).val())) {
digit.append('<i class="fas fa-check-circle is-font-primary"></i> A least one digit.');
} else {
digit.append('<i class="fas fa-times-circle is-font-danger"></i> At least one digit.');
}
//Check min
if (/^(?=.*[a-z])/.test($(this).val())) {
min.append('<i class="fas fa-check-circle is-font-primary"></i> At least one min.');
} else {
min.append('<i class="fas fa-times-circle is-font-danger"></i> At least one min.');
}
//Check maj
if (/^(?=.*[A-Z])/.test($(this).val())) {
maj.append('<i class="fas fa-check-circle is-font-primary"></i> At least one maj.');
} else {
maj.append('<i class="fas fa-times-circle is-font-danger"></i> At least one maj.');
}
}
});
Checking the password size :
We check with the regular expression /^(.{8,})/ that the password is at least 8 characters long. Details of the test method on a pattern
If we wanted a maximum of 20 characters we should have put this pattern: /^(.{,20})/.
Adding the “i” tags allows us to add logos to indicate whether it is valid or not.
//Check at least 8 char
if (/^(.{8,})/.test($(this).val())) {
size.append('<i class="fas fa-check-circle is-font-primary"></i> At least 8 characters. (' + $(this).val().length + '/8)');
} else {
size.append('<i class="fas fa-times-circle is-font-danger"></i> At least 8 characters. (' + $(this).val().length + '/8)');
}
Checking for the presence of a number :
The pattern /^(?=.*\d)/ verifies the presence of a digit.
//Check one digit
if (/^(?=.*\d)/.test($(this).val())) {
digit.append('<i class="fas fa-check-circle is-font-primary"></i> A least one digit.');
} else {
digit.append('<i class="fas fa-times-circle is-font-danger"></i> At least one digit.');
}
Upper and lower case checking :
The pattern /^(?=.*[a-z])/ verifies that there is a lower case letter and you guessed it the pattern /^(?=.*[A-Z])/ verifies upper case.
//Check min
if (/^(?=.*[a-z])/.test($(this).val())) {
min.append('<i class="fas fa-check-circle is-font-primary"></i> At least one min.');
} else {
min.append('<i class="fas fa-times-circle is-font-danger"></i> At least one min.');
}
//Check maj
if (/^(?=.*[A-Z])/.test($(this).val())) {
maj.append('<i class="fas fa-check-circle is-font-primary"></i> At least one maj.');
} else {
maj.append('<i class="fas fa-times-circle is-font-danger"></i> At least one maj.');
}
Conclusion:
You now have an input indication for your user, it now remains to block the submission of the form when the user has incorrectly filled in his password.
Regular expressions (Regex) are quite powerful, here is a link to test them : Learn and test regular expressions
