자바스크립트로 유효성검사하기 - nhnacademy-be10-WannaB/wannab-wiki GitHub Wiki

<!-- 폼 제출 시 checkPhoneNumber() 함수가 실행됨 -->
<form action="/submit-phone" method="post" onsubmit="return checkPhoneNumber();"> 
  <label for="phone">전화번호:</label>
  <input
    type="tel" <!-- number로 하면 010의 0이 사라지므로 tel로 지정해야 함 -->
    id="phone"
    name="phone"
    pattern="^\d{11}$" <!-- 숫자만 11자리 입력했는지 확인하는 정규식 -->
    maxlength="11" <!-- 최대 11자리까지만 입력 가능 -->
    required <!-- 빈 값이면 제출되지 않도록 함 -->
    placeholder="숫자만 11자리 입력" <!-- 입력 전 안내 텍스트 -->
  />
  <button type="submit">제출</button>
</form>

<script>
  // 전화번호가 숫자 11자리가 아니면 alert 띄우고 제출 막기
  function checkPhoneNumber() {
    const phone = document.getElementById("phone").value;
    if (!/^\d{11}$/.test(phone)) {
      alert("전화번호는 숫자만 11자리로 입력해주세요.");
      return false; // form 제출 방지
    }
    return true; // 정상 입력 시 제출 허용
  }
</script>
⚠️ **GitHub.com Fallback** ⚠️