VeeValidate : Strong Password Validation

VeeValidate documentation isn’t great for creating custom validation and one thing that you will commonly need to create is strong password validation for your frontend users.

Here is an example of how you can achieve validation of a strong password with password confirmation validation. The regex used confirms that a password meets the following criteria 1 uppercase letter, 1 lowercase letter, 1 number, and one special character

Vue JS

   import VeeValidate from 'vee-validate';

    Vue.use(VeeValidate);

    VeeValidate.Validator.extend('verify_password', {
        getMessage: field => `The password must contain at least: 1 uppercase letter, 1 lowercase letter, 1 number, and one special character (E.g. , . _ & ? etc)`,
        validate: value => {
            var strongRegex = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})");
            return strongRegex.test(value);
        }
    });

import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);

VeeValidate.Validator.extend('verify_password', {

getMessage: field => `The password must contain at least: 1 uppercase letter, 1 lowercase letter, 1 number, and one special character (E.g. , . _ & ? etc)`,

validate: value => {

var strongRegex = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})");

return strongRegex.test(value);

}

});

HTML

<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">
                    <i class="fa fa-lock"></i>
                </span>
                <input v-validate="'required|min:8|verify_password'" type="password" name="password" class="form-control" placeholder="Password">
            </div>
            <p v-show="errors.has('password')" class="help is-danger">{{ errors.first('password') }}</p>
        </div>
    </div>
    <div class="col-md-6">
        <div class="input-group">
                <span class="input-group-addon">
                    <i class="fa fa-lock"></i>
                </span>
            <input data-vv-as="password confirmation" v-validate="'required|confirmed:password'" type="password" name="password_confirmed" class="form-control" placeholder="Confirm Password">
        </div>
        <p v-show="errors.has('password_confirmed')" class="help is-danger">{{ errors.first('password_confirmed') }}</p>
    </div>
</div>

</span>

</div>

<p v-show="errors.has('password')" class="help is-danger">{{ errors.first('password') }}</p>

</div>

</span>

</div>

<p v-show="errors.has('password_confirmed')" class="help is-danger">{{ errors.first('password_confirmed') }}</p>

</div>