Vue v-for 에서 input 폼 검증

Question

안녕하세요.

현재 폼검증을 만들고 있습니다만.

유효성 검사 실패시 나오는 문구가 동시에 나와서 이것을 어떻게 나눠줘야 할지 궁금합니다. 소스 자르고 수정해서 올리느라 v-for :key 값 없는 데이터 이런거는 양해부탁드립니다.

<div v-for="Accounts in AccountArrays" :key="Accounts.id"> <input :type="Accounts.type" :id= :placeholder="Accounts.title" v-model="Accounts.value" /> <p v-if="ValidatorEvent.Error"> {{ ValidatorEvent.Error[0] }} </p> </div> <script> import Validator from "../../assets/js/Validate"; data() { return { AccountArrays: [ { title: "이메일", value: "", }, { title: "핸드폰 번호", value: "", }, { title: "비밀번호", value: "", }, { title: "추천인", value: "", }, ], ValidatorEvent: { Error: "", }, }; }, watch: { "AccountArrays.0.value": function (value) { this.ValidatorEvent.Error = Validator.Validate("Email", value); }, "AccountArrays.1.value": function (value) { this.ValidatorEvent.Error = Validator.Validate("Phone", value); }, "AccountArrays.2.value": function (value) { this.ValidatorEvent.Error = Validator.Validate("PassWord", value); }, "AccountArrays.3.value": function (value) { this.ValidatorEvent.Error = Validator.Validate("Referral", value); }, }, </script>

Validate.js

우선은 유효성 검사 없이 경고메시지 뜨는것을 보기 위해 작성되었습니다.

export default { Validate(type, value) { let Temporary = []; let Length; let Content; let Empty; switch (type) { case "Email": Length = 3; Content = "이메일 형식에 맞게 입력해주세요."; Empty = "이메일을 입력해주세요."; break; case "Phone": Length = 3; Content = "핸드폰 번호에 형식에 맞게 입력해주세요."; Empty = "핸드폰 번호를 입력해주세요."; break; case "PassWord": Length = 3; Content = "영문, 숫자를 포함하여 8자 이상입니다."; Empty = "비밀번호를 입력해주세요."; break; case "Referral": Length = 3; Content = ""; Empty = ""; break; } if (!value) { Temporary.push(Empty); } else { Temporary.push(Content); // if (value.length < Length) { // Temporary.push(Content); // } } return Temporary; }, };

Answer 1

검증쪽은 문제가 없는것으로 보이는데 data의 ValidatorEvent 항목이 key에 맞춰서 업데이트 되지 않는걸로 보입니다.

data의 AccountArray의 오브젝트에 error를 추가하시거나, ValidatorEvent의 Error 항목을 String이 아닌 Object 형태로 만드는것도 도움이 될거라고 봅니다.

<script> export default { data () { return { AccountArrays: [ { title: "이메일", value: "", error: "" // 첫번째 답변 }, ], ValidatorEvent: { Error: { // 두번째 답변 Email: '', PhoneNo: '', } } } } } </script>

그리고 질문 의도와는 다르지만, 완전 자동화를 생각 하실경우 this.$watch 와 같은 형태로 반복문을 통해 watch를 선언하시거나, $watch만 가능한 deep을 통해 반복문 없이 하위항목의 변화도 파악하여 선언하는 형태로 진행하시면 조금 더 편하게 폼 작업을 하실 수 있으실겁니다.

API 문서: https://vuejs.org/v2/api/#vm-watch

Answer 2

폼이 배열을 이용해서 만들어져 있고 input들도 해당 배열 안의 요소대로 만들어져 있는데 그에 반해 input 아래 에러를 보여주는 코드에서는 모든 input들이 ValidatorEvent.Error 하나를 사용하고 있기 때문에 일어난 현상입니다.

<div v-for="Accounts in AccountArrays" :key="Accounts.id"> <input :type="Accounts.type" :id= :placeholder="Accounts.title" v-model="Accounts.value" /> <p v-if="Accounts.Error"> {{ Accounts.Error[0] }} </p> </div> <script> import Validator from "../../assets/js/Validate"; data() { return { AccountArrays: [ { title: "이메일", value: "", error: '' }, { title: "핸드폰 번호", value: "", error: '' }, { title: "비밀번호", value: "", error: '' }, { title: "추천인", value: "", error: '' }, ] }; }, watch: { "AccountArrays.0.value": function (value) { this.AccountArrays.0.Error = Validator.Validate("Email", value); }, "AccountArrays.1.value": function (value) { this.AccountArrays.1.Error = Validator.Validate("Phone", value); }, "AccountArrays.2.value": function (value) { this.AccountArrays.2.Error = Validator.Validate("PassWord", value); }, "AccountArrays.3.value": function (value) { this.AccountArrays.3.Error = Validator.Validate("Referral", value); }, }, </script>

위와 같이 코드를 수정하시면 인풋들이 각자의 error 내용을 담고 있고 이를 사용하기 때문에 문제가 해결될 것으로 보입니다.