폼과 유효성 검사 로직을 생성하는 프롬프트

언제 사용하나

입력 폼과 클라이언트 유효성 검사를 빠르게 구성할 때.

요청 전 확인

• 폼 필드와 검증 규칙, 제출 후 동작을 정리한다.
• 사용하는 폼 라이브러리(있다면)를 확인한다.

복사해서 쓰는 프롬프트

{{FORM}} 폼과 유효성 검사를 만들어줘.

필드와 규칙:
{{FIELDS}}

- 제출 전 검증하고, 필드별 에러 메시지를 인접 표시해줘.
- 제출 중 버튼 비활성화 등 중복 제출 방지를 넣어줘.
- 서버 검증도 필요하다는 전제로 클라이언트 검증만 신뢰하지 않도록 주석으로 남겨줘.

placeholder 설명

• {{FORM}} : 폼 용도 (예: "회원가입")
• {{FIELDS}} : 필드와 검증 규칙

입력 예시

{{FIELDS}} = "email(형식), password(8자 이상), 약관동의(필수)"

기대 결과

검증·에러표시·중복제출 방지가 포함된 폼.

검증 방법

빈 제출, 잘못된 형식, 정상 입력을 각각 시도한다.

주의사항

• 클라이언트 검증은 UX용이며 보안 검증은 서버에서 다시 한다.

관련 문서

• MDN 폼 검증: https://developer.mozilla.org/ko/docs/Learn/Forms/Form_validation