입력값 검증 메서드

사용자로부터 입력 받은 값이 공백인지, 유효한 값인지등 검증을 하고 서버 요청을 보내야하잖 ! 

그래서 

methods: {
    validateFields() {
        const requiredFields = [
            { key: 'name', label: '이름' },
            { key: 'no', label: '번호' },
            { key: 'age', label: '나이' },
            { key: 'phone', label: '전화번호' },
            { key: 'address', label: '주소' },
        ];

        for (const field of requiredFields) {
            const value = this.memberInfo[field.key];
            if (!value || (typeof value === 'string' && value.trim() === '')) {
                const errorMessage = `'${field.label}'은(는) 필수 입력임`;
                alert(errorMessage); // 경고 메시지 표시
                return false; // 검증 실패 시 false 반환함
            }
        }

        return true; // 검증 통과 시 true 반환함
    },

    saveMember() {
        if (!this.validateFields()) return; // 검증 실패 시 중단됨
        console.log('회원 정보 저장됨:', this.memberInfo); // 저장된 정보 출력
    },

    addMember() {
        if (!this.validateFields()) return; // 검증 실패 시 중단됨
        console.log('회원 정보 추가됨:', this.memberInfo); // 추가된 정보 출력
    }
}

요로코롬 해봄

 

• requiredFields 정의: 검증 대상 필드 목록 생성.
• 반복문 실행: 필드를 순회하며 각 필드 값을 확인.
• 검증 실패 시 경고 메시지 표시: 메시지를 화면에 표시하고 false 반환.

• 검증 성공 시: 모든 필드가 유효하면 true 반환하여 다음 작업(저장 또는 추가) 실행.

 

---

this.memberInfo = {
    name: '홍길동',
    no: '12345',
    age: '',
    phone: '010-1234-5678',
    address: '서울시 강남구'
};

사용 흐름

1. addMember 버튼 클릭.
2. validateFields 실행.
   • name: 값 있음 → 통과.
   • no: 값 있음 → 통과.
   • age: 빈 값 → 경고 메시지 출력:

     '나이'은(는) 필수 입력임

 

• 검증 실패 → 함수 종료, addMember 실행 안 됨.

3. age에 값을 입력한 뒤 다시 addMember 버튼 클릭.

• validateFields 재실행, 모든 필드 통과.
• 콘솔 출력:

회원 정보 추가됨: { name: '홍길동', no: '12345', age: '30', phone: '010-1234-5678', address: '서울시 강남구' }

 

 

 

• 필수 입력값 검증을 위한 함수 validateFields 작성함.
• 모든 필드의 값을 확인해서 빈 값 있으면 경고 메시지 띄움.
• 검증 성공 시 true 반환, 실패 시 false 반환함.
• saveMember나 addMember 호출 전에 검증 수행해서 조건 만족 안 되면 실행 중단됨.
• 예를 들어, age가 비었으면 경고 메시지 나옴: "'나이'은(는) 필수 입력임"
• 모든 필드 채우면 성공적으로 회원 정보가 저장되거나 추가됨.

 

 

 

 

 

 

 

---

1. requiredFields 정의

const requiredFields = [
    { key: 'name', label: 이름 },
    ...
];

 

• 목적: 입력값 검증이 필요한 필드들을 한 곳에 정의하여 관리.
• 구조: key: memberInfo 객체에서 해당 필드의 값을 가져오기 위한 키.

 

---

2. 입력값 순회 및 검증

for (const field of requiredFields) {
    const value = this.memberInfo[field.key];
    ...
}

 

 

• 목적: 모든 필드를 순회하며 값을 검증.
• 동작:
  • field.key: memberInfo 객체에서 해당 필드의 값을 가져옴
  • 예를 들어 field.key가 'name'일 때 this.memberInfo['name']를 가져옴.

 

---

3. 값 검증 로직

if (!value || (typeof value === 'string' && value.trim() === '')) {
    ...
}

• 검증 조건:
  1. !value: 값이 null, undefined, 0, false, '' 등 "Falsy" 값인지 확인.
  2. typeof value === 'string' && value.trim() === '': 문자열의 경우, 공백만 포함된 경우도 비어 있는 값으로 간주.
• 예외 처리:
  • 숫자형 0은 유효한 값으로 간주하고 싶다면 조건을 조정해야 함

---