99. Dropdown and Checkbox Fields

• vue cli start 링크

npm create vue@latest

---

• 프로젝트 링크

---

1. Country 필드:

   • 드롭다운으로 국가 목록을 나타냄.
   • select 엘리먼트를 VeeField 컴포넌트로 변경.
   • 태그 이름을 as 속성을 통해 select로 지정.
   • 컴포넌트에 name 속성을 country로 설정.
   • 드롭다운이므로 최소/최대 글자 수 규칙 필요 없음.
   • 필수 선택 사항으로 required 규칙 적용.
   • 국가별 특정 값을 제외하는 규칙 추가 (예: 남극).
   • not one of 규칙을 Excluded로 이름 변경하여 적용.

2. 약관 동의 체크박스:

   • 체크박스를 VeeField 컴포넌트로 변환.
   • name 속성을 toss로 설정.
   • 체크 시 값 1을 부여.
   • 체크 여부만 검증 (값 검증 필요 없음).
   • required 규칙으로 필수 선택 지정.

3. 폼 검증 테스트:

   • 브라우저에서 콘솔을 통해 에러 확인.
   • 국가 필드에서 남극 선택 시 오류 발생.
   • 약관 동의 체크박스는 터치되지 않으면 검증 안 함.

4. 향후 계획:

   • 폼 제출 시 검증 방식 배움.
   • 모든 입력 필드에 대한 검증 완료 후 다음 단계로 이동.
   • 입력 필드가 터치되지 않은 경우에도 검증이 이루어지도록 설정 예정.

---

다음 강의에서 폼 제출과 관련된 검증 방법을 다룰 예정.