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

Livewire Component Library
        data() {
            return {
                password: '',
                has_minimum_lenth: false,
                has_number: false,
                has_lowercsae: false,
                has_uppercase: false,
                has_special: false,
                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.

Host Laravel Application on DigitalOcean

Use coupon 5balloons on this Cloudways Affiliate URL to get special discount.

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>

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.

    text-decoration: line-through;

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


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

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

    Site Footer