Brave publisher PUBLISHER
Web developer Front-End in Oise, France - Gary Deshayes

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 are quite powerful, here is a link to test them : Learn and test regular expressions

News publications :

Symfony 5 | Return an image via a controller route

Symfony

Created at : Wednesday 1 September 2021

VueJS 3, ExpressJS 4.17 | Uploading and resizing an image

Javascript Framework JS

Created at : Saturday 28 November 2020

Symfony Event Subscriber | Restricting an ip range with an Event Subscriber

Symfony

Created at : Saturday 14 November 2020

Angular, ExpressJS | JWT authentication with Angular 10 and ExpressJS 4 (MySQL)

Javascript SQL Framework JS

Created at : Sunday 20 September 2020

Symfony, Excel, CSV | Generating a CSV file for Excel with Symfony

Symfony

Created at : Thursday 6 August 2020

Symfony FormType Choice | Set data default to group of radio button

Symfony

Created at : Sunday 26 July 2020

Doctrine, Symfony | Difference between two dates in MySQL (Day, month, year...)

Symfony SQL

Created at : Thursday 18 June 2020

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

Javascript jQuery

Created at : Monday 23 March 2020

Symfony, Doctrine | Retrieve old data of FormType

Symfony

Created at : Friday 14 February 2020

jQuery, Webpack and Symfony | Call jQuery in your twig files

Symfony Bugs

Created at : Sunday 26 January 2020