Vuetify matching passwords with rules

The last project I worked in required a login process. The user credentials includes email and password, so the sign up form should also include a matching password validation. Vuetify offers a couple of options to validate the input fields of a form: rules, Vee-validate, and Vuelidate. This particular registration form is simple, and I like to avoid using third party libraries every time I can, so I decided to make my own validation rules with the rules prop option.

First, I want to define my rules. I need:
1. A Required rule: these password fields are mandatory, so in this rule I need to check if the password field has or has not data.
2. A Min6 rule: the backend defines a password with more than 6 characters, so I need to force the user to create a password whose length must be greater than 6.
3. A Matching Passwords rule: the verify password field should has a rule that compares both passwords.

Now I need to pass these rules to the v-text-field as props:

:rules="[required, min6, matchingPasswords]"

Please, note that the rules order is important. First, we need to check that the password field is not empty (required rule). Then, we want to check the password length (min6 rule). Lastly, and just for the verify password field, we need to be sure that both passwords are exactly the same (matchingPassword rule).

I also need a computed method to handle the append icon. You can take a look at my post Vuetify form inputs with icon check for more details.

And that’s it!

Here’s a working Codepen where you can see the Vuetify rules in action.

And here is a complete sign up form with both Password and Verify Password input fields.