Simple password strength validator checker for vue.js.

Password strength:

• 8 letters
• contains a number
• contains uppercase letters
• contains a special character

How to make use of it:

Install & Download:

<div id="app">
    <h2> Password Strength</h2>

    <div class="input_container">
        <ul>
            <li v-bind:class="{ is_valid: contains_eight_characters }">8 Characters</li>
            <li v-bind:class="{ is_valid: contains_number }">Contains Number</li>
            <li v-bind:class="{ is_valid: contains_uppercase }">Contains Uppercase</li>
            <li v-bind:class="{ is_valid: contains_special_character }">Contains Special Character</li>
        </ul>

        <div class="checkmark_container" v-bind:class="{ show_checkmark: valid_password }">		
            <svg width="50%" height="50%" viewBox="0 0 140 100">
                <path class="checkmark" v-bind:class="{ checked: valid_password }" d="M10,50 l25,40 l95,-70" />
            </svg>
        </div>
        
    <input type="password" @input="checkPassword" v-model="password" autocomplete="off" placeholder="Password" />
    </div>
</div>

vue password strength validation plugin/codepen

See Demo And Download

Official Website(rauldronca): Click Here

This superior jQuery/javascript plugin is developed by rauldronca. For extra advanced usage, please go to the official website.