How to write a Password strength indicator in VueJs

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 1

<div id="app" class="container">
</div><!-- #app  -->

This is what we be using in Vue to target the password

Step 2

<div id="app" class="container">
<h1>Vue Password Strength Indicator</h1>
<label class="frmLabel" for="password">Password</label>
<input placeholder="Enter your password" name="password" class="frmField" type="password" />
<p class="frmValidation">Longer than 7 characters</p>
<p class="frmValidation">Has a capital letter</p>
<p class="frmValidation">Has a lowercase letter</p>
<p class="frmValidation">Has a number</p>
<p class="frmValidation">Has a special character</p>
</div><!-- #app  -->

We’ve added the password field and all the requirements which we wish to validate.

Step 3

<style>
body{background-color: #EFEFEF;}
.container{width:400px; margin:50px auto; background: white; padding:10px; font-family: Arial, Helvetica, sans-serif, sans-serif; border-radius: 3px;}
h1{ font-size: 24px; text-align: center; text-transform: uppercase;}
.frmField{background-color:white; color:#495057; line-height: 1.25; font-size: 16px; font-family: 'Roboto', sans-serif; border:0; padding: 10px; border:1px solid #dbdbdb;  border-radius: 3px; width:90%;}
.frmLabel{display: block; margin-bottom: 10px; font-weight: bold;}
.frmValidation{font-size: 13px; }
</style>

Step 4

<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app'
    });       
</script>

As mentioned in step 1 we are using the app id to target Vue

Step 5

let app = new Vue({
    el: '#app',
    data:{
        message:       '',
        has_number:    false,
        has_lowercase: false,
        has_uppercase: false,
        has_special:   false,
    }
});

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.

Step 6

let app = new Vue({
    el: '#app',
    data:{
        message:       '',
        has_number:    false,
        has_lowercase: false,
        has_uppercase: false,
        has_special:   false,
    },
    methods: {
        password_check: function () {
            this.has_number    = /\d/.test(this.message);
            this.has_lowercase = /[a-z]/.test(this.message);
            this.has_uppercase = /[A-Z]/.test(this.message);
            this.has_special   = /[!@#\$%\^\&*\)\(+=._-]/.test(this.message);
        }
    },
});

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.

Step 7

<p class="frmValidation">Longer than 7 characters</p>
<p class="frmValidation" :class="{'frmValidation--passed' :has_uppercase }">Has a capital letter</p>
<p class="frmValidation" :class="{'frmValidation--passed' :has_lowercase }">Has a lowercase letter</p>
<p class="frmValidation" :class="{'frmValidation--passed' : has_number }">Has a number</p>
<p class="frmValidation" :class="{'frmValidation--passed' : has_special }">Has a special character</p>

We are going to add an additional class called frmValidation–passed these will show if each variable is true.

Step 8

<label class="frmLabel" for="password">Password</label>
<input placeholder="Enter your password" name="password" class="frmField" type="password" @input="password_check" v-model="message" />

We have now added our function password_check on input to the password element and also added the message to the v-model

Step 9

.frmValidation{font-size: 13px; }
    .frmValidation--passed{color:#717b85;}

We’ve styled the new class it’s a light grey color.

Step 10

<p class="frmValidation" :class="{'frmValidation--passed' : message.length > 7}">Longer than 7 characters</p>

For the message we just check if the message length is greater than 7

Step 11

<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet" />

.frmValidation{font-size: 13px; }
.frmValidation--passed{color:#717b85;}
.frmIcon{color:#EB0029;}
    .frmValidation--passed .frmIcon{color:#0fa140;}

We using font awesome for the icons. The icons will dynamically change once they have passed along with the colour from red to green.

Step 12

<p class="frmValidation" :class="{'frmValidation--passed' : message.length > 7}"><i class="frmIcon fas" :class="message.length > 7 ? 'fa-check' : 'fa-times'"></i> Longer than 7 characters</p>
<p class="frmValidation" :class="{'frmValidation--passed' :has_uppercase }"><i class="frmIcon fas" :class="has_uppercase ? 'fa-check' : 'fa-times'"></i> Has a capital letter</p>
<p class="frmValidation" :class="{'frmValidation--passed' :has_lowercase }"><i class="frmIcon fas" :class="has_lowercase ? 'fa-check' : 'fa-times'"></i> Has a lowercase letter</p>
<p class="frmValidation" :class="{'frmValidation--passed' : has_number }"><i class="frmIcon fas" :class="has_number ? 'fa-check' : 'fa-times'"></i> Has a number</p>
<p class="frmValidation" :class="{'frmValidation--passed' : has_special }"><i class="frmIcon fas" :class="has_special ? 'fa-check' : 'fa-times'"></i> Has a special character</p>

Here is the demo and a link to the code to Download.