반응형
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'
}
}
규칙은 필드 확인을 처리하는 적절한 방법이 아닙니다.emailConfirmationRules는 emailConfirmation이 변경될 때만 트리거되지만 이메일을 다시 변경하면 규칙이 적용되지 않으면 필드가 더 이상 일치하지 않습니다.
이 작업은 수동으로 수행해야 합니다.
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
반응형
'programing' 카테고리의 다른 글
문자열이 C에서 다른 문자열로 시작되는지 확인하는 방법 (0) | 2022.07.01 |
---|---|
컴포넌트 템플릿 내의 Vuex getter에서 업데이트된 값을 얻는 방법 (0) | 2022.07.01 |
Bootstrap-Vue: 요소를 나머지 공간에 채우십시오. (0) | 2022.07.01 |
vuex에서 모듈의 네임스페이스란 정확히 무엇입니까? (0) | 2022.07.01 |
그래들 프록시 구성 (0) | 2022.07.01 |