web-dev-qa-db-fra.com

Comment ajouter une validation de correspondance de mot de passe dans Vuetify?

J'essaie de créer un formulaire de profil qui a deux champs password et rePassword. fondamentalement, les deux devraient être les mêmes.

J'ai essayé d'utiliser différents codes trouvés sur le Web et différentes approches. Certains d'entre eux ont travaillé mais. Cela ne cadrait pas vraiment avec le code.

Voici le morceau de code:

Profile.vue:

<v-layout>
        <v-flex xs12 sm6>
          <v-text-field                        
            v-model="password"
            :append-icon="show ? 'visibility' : 'visibility_off'"
            :rules="[rules.required, rules.min]"
            :type="show ? 'text' : 'password'"
            name="password"
            label="Enter Password"
            hint="At least 8 characters"
            counter
            @click:append="show = !show"
          ></v-text-field>
        </v-flex>

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

Voici à quoi ressemble le script:

Profile.vue (script):

data() {
      return {
        show: false,
        show1: false,
        password: 'Password',
        rePassword: 'Password',
        rules: {
          required: value => !!value || 'Required.',
          min: v => v.length >= 8 || 'Min 8 characters',
          emailMatch: () => ('The email and password you entered don\'t match')
        },
        emailRules: [
          v => !!v || 'E-mail is required',
          v => /.+@.+/.test(v) || 'E-mail must be valid'
        ],
        date: new Date().toISOString().substr(0, 10),
        menu: false,
        items: ['male', 'female'],
        address: '',
        title: "Image Upload",
        dialog: false,
        imageName: '',
        imageUrl: '',
        imageFile: ''
      }
    },
    methods: {
      pickFile() {
        this.$refs.image.click()
      },            
          onFilePicked(e) {
        const files = e.target.files
        if(files[0] !== undefined) {
          this.imageName = files[0].name
          if(this.imageName.lastIndexOf('.') <= 0) {
            return
          }
          const fr = new FileReader ()
          fr.readAsDataURL(files[0])
          fr.addEventListener('load', () => {
            this.imageUrl = fr.result
            this.imageFile = files[0] // this is an image file that can be sent to server...
          })
        } else {
          this.imageName = ''
          this.imageFile = ''
          this.imageUrl = ''
        }
        },
    }
      ,
      validate() {
        if (this.$refs.form.validate()) {
          this.snackbar = true
        }
      },
      reset() {
        this.$refs.form.reset()
      }

Comment ajouter une fonction de correspondance de mot de passe dans la validation à l'aide de vuetify. Merci

validationvue.jsvuetify.js
6
abhigyan nayak

le moyen le plus simple est d'utiliser le v-model (mot de passe et confirm_password), pas besoin d'utiliser le calcul

Règle

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

Ou

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

dans le mot de passe

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

confirmer le champ du mot de passe Règle

 :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>
1
ßãlãjî