Password Validation Indicator in VueJS

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

Password should contain atleast 8 chacters, one lowercase letter, one uppercase letter, One number, and one special character.

Related Articles

If you like our content, please consider buying me a coffee.

Thank you for your support!

Buy me a coffeeBuy me a coffee

Join my VueJS Newsletter

As I advance in my Journey of learning VueJS, I will be working on different exercises and challenges. Subscribe to receive the latest tutorials (every week) directly in your inbox.

    I won't send you spam. Unsubscribe at any time.

    Powered By ConvertKit

    Leave a reply:

    Your email address will not be published.

    Site Footer