In this exercise let’s build a simple component in VueJS using which we can give real-time indication to the user if his password meets all the validation requirements.

Usually on the sites, you must have seen password having requirement of having atleast certain number of characters, must have atleast one number, a special character, an uppercase character and other requirements.

We’ll be displaying all the requirements just below the password field and will strike it off once user completes the requirement.

Here is the code for Vue Component

    Vue.component('password-helper',{
        data() {
            return {
                password: '',
                has_minimum_lenth: false,
                has_number: false,
                has_lowercsae: false,
                has_uppercase: false,
                has_special: false,
            }
        },
        watch:{
            password(){
                this.has_minimum_lenth = (this.password.length > 8);
                this.has_number    = /\d/.test(this.password);
                this.has_lowercase = /[a-z]/.test(this.password);
                this.has_uppercase = /[A-Z]/.test(this.password);
                this.has_special   = /[!@#\$%\^\&*\)\(+=._-]/.test(this.password);
            }
        }
    });

    var app = new Vue({
       el: '#app' 
    });

Here we register a new component named password-helper, declare some data properties and we use the watcher on the password property to detect the changes.

I am going with inline-template in my HTML; since I will be using this template at multiple places on my website which doesn’t necessarily have the same layout for the password field.

<password-helper inline-template>
    <div class="form-group mb-3">
        <label for="password">Password</label>
        <input type="password" class="form-control" placeholder="Password" v-model="password">
        <small id="passwordHelp" class="form-text text-muted">Password should contain 
            <span :class="has_minimum_lenth ? 'has_required' : ''">atleast 8 chacters</span>, 
            <span :class="has_lowercase ? 'has_required' : ''">one lowercase letter</span>, 
            <span :class="has_uppercase ? 'has_required' : ''">one uppercase letter</span>, 
            <span :class="has_number ? 'has_required' : ''">One number</span>, and 
            <span :class="has_special ? 'has_required' : ''">one special character.</span></small>
    </div>
</password-helper>

We have used the v-bind directive of Vue to bind the class has_required which will change the text styling.

Add the below CSS to change the text styling.

.has_required{
    text-decoration: line-through;
    color:#689868;
}

That’s all about the password validation indicator. Here is the demo.

Demo