JavaScript, jQuery et Regex | Secure a password in real time with JS

Web developer Front-End in Oise, France - Gary Deshayes <--Traduction

Created at : Monday 23 March 2020


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%.

secure password javascript jquery regex

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

News publications :
Symfony

Created at : Monday 1 November 2021

Javascript Framework JS

Created at : Sunday 31 October 2021

Symfony

Created at : Wednesday 1 September 2021

Javascript Framework JS

Created at : Saturday 28 November 2020

Javascript SQL Framework JS

Created at : Sunday 20 September 2020

Symfony

Created at : Thursday 6 August 2020

Javascript jQuery

Created at : Monday 23 March 2020

Symfony

Created at : Friday 14 February 2020

Symfony Bugs

Created at : Sunday 26 January 2020