자바스크립트 실무 유틸 함수 시리즈 15 - 폼 입력 검증을 위한 유틸

이번 15편에서는 다양한 사용자 입력을 검증하고 처리하기 위한 유용한 자바스크립트 유틸 함수들을 정리합니다. 유효성 검사, 입력 형식 감지, 실시간 피드백 등에 유용하게 활용할 수 있습니다.

---

✅ 1. isRequired (빈 값 확인)

📌 공백 여부 검사

function isRequired(value) {
  return value !== undefined && value !== null && value.toString().trim() !== '';
}

📌 활용 예시

• 필수 입력 항목 체크
• 유효성 메시지 표시

---

✅ 2. isValidEmail (이메일 형식 검사)

📌 이메일 정규표현식 기반 유효성 검사

function isValidEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

📌 활용 예시

• 회원가입 및 로그인 입력
• 마케팅 이메일 입력 확인

---

✅ 3. isStrongPassword (비밀번호 강도 검사)

📌 숫자, 문자, 특수문자 포함 여부 확인

function isStrongPassword(password) {
  const pattern = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*]).{8,}$/;
  return pattern.test(password);
}

📌 활용 예시

• 보안 강화된 패스워드 정책 구현
• 실시간 비밀번호 입력 피드백

---

✅ 4. isPhoneNumber (전화번호 형식 확인)

📌 국내 휴대폰 번호 유효성 확인

function isPhoneNumber(phone) {
  return /^01[016789]-?\d{3,4}-?\d{4}$/.test(phone);
}

📌 활용 예시

• 본인 인증용 연락처 확인
• 전화번호 입력 포맷 가이드

---

✅ 5. validateForm (통합 폼 유효성 검사기)

📌 필드별 유효성 규칙을 받아 일괄 검사

function validateForm(values, rules) {
  const errors = {};
  for (const field in rules) {
    if (!rules[field](values[field])) {
      errors[field] = `${field} 항목이 올바르지 않습니다.`;
    }
  }
  return errors;
}

📌 활용 예시

• 폼 제출 전 유효성 일괄 체크
• 에러 메시지와 함께 사용자 피드백 제공

---

✅ 결론

정확하고 빠른 폼 입력 검증은 사용자 경험의 핵심입니다. 이번 시리즈에서 다룬 유틸 함수들을 사용하면 입력 오류를 효과적으로 방지하고, 신뢰할 수 있는 데이터를 수집할 수 있습니다.