programing

Vuetify 폼 검증 - 일치하는 입력을 위한 ES6 규칙 정의

prostudy 2022. 7. 1. 20:48
반응형

Vuetify 폼 검증 - 일치하는 입력을 위한 ES6 규칙 정의

ES6 & regex를 사용하여 유효한 이메일인지 확인하는 이메일 입력이 포함된 (Vuetify) 폼을 가지고 있습니다.내가 어떻게 다른 것을 셋업할 수 있을까?emailConfirmationRules체크하기 위한 규칙 집합emailConfirmation입력이 일치합니다.email입력하시겠습니까?

<template>
  <v-form v-model="valid">
       <v-text-field label="Email Address"
            v-model="email" 
            :rules="emailRules"
            required></v-text-field>

       <v-text-field label="Confirm Email Address"
            v-model="emailConfirmation" 
            :rules="emailConfirmationRules"
            required></v-text-field>
   </v-form>
 <template>

export default {
    data () {
      return {
         valid: false,
         email: '',
         emailConfirmation: '',
         emailRules: [
             (v) => !!v || 'E-mail is required',
             (v) => /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
        ],
        emailConfirmationRules: [
            (v) => !!v || 'Confirmation E-mail is required',
        ]   (v) => ??? || 'Confirmation E-mail does not match'
    }
}

규칙은 필드 확인을 처리하는 적절한 방법이 아닙니다.emailConfirmationRulesemailConfirmation이 변경될 때만 트리거되지만 이메일을 다시 변경하면 규칙이 적용되지 않으면 필드가 더 이상 일치하지 않습니다.

이 작업은 수동으로 수행해야 합니다.

methods: {
  emailMatchError () { 
    return (this.email === this.emailConfirmation) ? '' : 'Email must match'
  }
}
<v-text-field v-model='emailConfirmation' :error-messages='emailMatchError()'></v-text-field>

vee-validate를 사용하여 이를 수행하는 다른 방법이 있을 수 있습니다.

계산된 규칙을 사용하여 동일한 작업을 수행할 수 있습니다.

computed: {
    emailConfirmationRules() {
      return [
        () => (this.email === this.emailToMatch) || 'E-mail must match',
        v => !!v || 'Confirmation E-mail is required'
      ];
    },
}

  emailConfirmationRules: [
    (v) => !!v || 'Confirmation E-mail is required',
    (v) => v == this.email || 'E-mail must match'
  ],
  <template>   
    <v-text-field
      v-model="employee.email"
      :rules="emailRules"
      required
      validate-on-blur
      />
</template>

<script>
data() {
    return {
    emailRules: [
        v => !!v || "E-mail is required",
        v =>
          /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
          "E-mail must be valid"
      ],
}
</script>

이 투고를 확인해 주세요.https://stackoverflow.com/a/58883995/9169379

<template>
  <v-input  v-model="firstPassword" />
  <v-input :rules=[rules.equals(firstPassword)] v-model="secondPassword" />
</template>

<script>    
  data() {
  firstPassword: '',
  secondPassword: '',
    rules: {
      equals(otherFieldValue) {
        return v =>  v === otherFieldValue || 'Not equals';
      }
    }
  }
</script>

언급URL : https://stackoverflow.com/questions/47213703/vuetify-form-validation-defining-es6-rules-for-matching-inputs

반응형