How to add password matching validation in vuetify? How to add password matching validation in vuetify? vue.js vue.js

How to add password matching validation in vuetify?


You can define custom rules:

computed: {    passwordConfirmationRule() {      return () => (this.password === this.rePassword) || 'Password must match'    }}

and use it

 <v-flex xs12 sm6>    <v-text-field                  v-model="rePassword"      :append-icon="show1 ? 'visibility' : 'visibility_off'"      :rules="[rules.required, rules.min, passwordConfirmationRule]"      :type="show1 ? 'text' : 'password'"      name="input-10-1"      label="Re-enter Password"      hint="At least 8 characters"      counter      @click:append="show1 = !show1"    />  </v-flex>


very easiest way isusing v-model (password and confirm_password), no need to use computation

Rule

:rules="[v => !!v || 'field is required']"

Or

:rules="[(password!="") || 'field is required']"

in password

<v-text-field label="Password*" v-model="password" type="password" required   :rules="[v => !!v || 'field is required']"></v-text-field>                

confirm password fieldRule

 :rules="[(password === confirm_password) || 'Password must match']"

code:

 <v-text-field label="Confirm Password*" v-model="confirm_password" type="password"  required   :rules="[(password === confirm_password) || 'Password must match']"></v-text-field>                    


VeeValidate is great for form validation but in my opinion is overkill for resolving this question when it can be achieved in Vuetify alone.

Following on from @ittus answer, you need to remove the arrow function in passwordConfirmationRule to access this:

      return this.password === this.rePassword || "Password must match";

See this codesandbox working example (also now using Vuetify 2.x)