My current place of work like most site has a password strength indicator. The requirements for the password is it has to be longer than seven characters, a capital letter, a special character and a number. All these requirements are currently hidden behind a tooltip. Which isn’t ideal for the user experience. An approach I saw recently was list all the requirements and change the opacity once they have been validated. I thought this would be idea for my work site. So I decided to rebuild it in Vue.

Below is a link of what we aim to have built by the end of this tutorial. Preview or Download.

I going to assume that you have a basic knowledge Javascript, Vue, Css and already have a html file setup.

Step 5

We now creating our data object. Inside is going to be five variables four of them are going to be set to false and which we will later set to true if validated. The fifth message this is going to be what we using for our vmodel for the password field.

We created a function called password_check this will run on every keyup for the password field message. We are then doing several different regex validation based on number, lowercase, uppercase and special characters. If they pass they change their respective variables to true.