JavaScript #14 (form)

폼 유형과 접근 방식

 

document.getElementById("inputId").value;

inputID는 html에서 작성된 inputID를 사용.
<input id="inputId" type="text" placeholder="-" />

 

예문 - input 칸에 입력한 값 가져오기 (각각 변수에 저장)

let gender = document.querySelector("input[name=gender]:checked").value;
let job = document.getElementById("job").value;

 

 

실습 - 배송 정보 복사

<input id="orderName" type="text" placeholder="주문자 이름" />
<input id="shipName" type="text" placeholder="수령인 이름" />
<input id="same" type="checkbox" onclick="copyName()" />

<script>
  function copyName() {
    if (document.getElementById("same").checked) {
      document.getElementById("shipName").value =
        document.getElementById("orderName").value;
    } else {
      document.getElementById("shipName").value = "";
    }
  }
</script>

 주문인과 수령인이 같을 때 체크해서 수령인 칸에 clone

 

 

 

연습문제 - 폼 제출 전 미리보기 버튼 구현

See the Pen Untitled by Cheolho Jang (@chiro-J) on CodePen.

 

 

 

 

유효성 검사 

- 폼 제출 전에 사용자의 입력값이 올바른지 확인하여 잘못된 입력을 막는 중요한 절차

• 사용자가 입력한 값이 조건에 맞는지 검사
• 예: 이름이 비어 있거나, 숫자가 아닌 경우, 이메일 형식이 틀린 경우 등
• if (value === ""), isNaN(value), .match(정규표현식) 등으로 검증

 

예문 - 이름과 나이 유효성 검사

function validateForm() {
  let name = document.getElementById("userName").value;
  let age = document.getElementById("userAge").value;

  if (name === "") {
    alert("이름을 입력하세요.");
    return false;
  }

  if (isNaN(age) || age < 1) {
    alert("나이를 올바르게 입력하세요.");
    return false;
  }

  alert("폼이 정상적으로 제출됩니다.");
  return true;
}

 

 

※ checkValidity()를 활용한 HTML5 검증

- HTML 요소에 required, pattern, minlength, type="email" 등을 지정하면 자동으로 유효성 검사를 할 수 있고, 

checkValidity()로 검사할 수 있다.

<form id="myForm">
  <input type="email" required>
  <button>제출</button>
</form>

<script>
  const form = document.getElementById("myForm");
  form.addEventListener("submit", function(e) {
    if (!form.checkValidity()) {
      e.preventDefault(); // 유효성 통과 못하면 제출 막기
      alert("필드를 올바르게 입력하세요.");
    }
  });
</script>

 

 

 

실습 - 폼 제출 유효성 검사

<form id="signupForm">
  <input type="text" id="username" placeholder="이름 입력"><br>
  <input type="email" id="email" placeholder="이메일 입력"><br>
  <input type="password" id="password" placeholder="비밀번호 입력"><br>
  <input type="password" id="confirmPassword" placeholder="비밀번호 확인"><br>
  <button type="submit">가입</button>
</form>

<script>
  document.getElementById("signupForm").addEventListener("submit", function(e) {
    e.preventDefault(); // 폼 제출 막기

    const username = document.getElementById("username").value.trim();
    const email = document.getElementById("email").value.trim();
    const password = document.getElementById("password").value;
    const confirmPassword = document.getElementById("confirmPassword").value;

    if (!username) {
      alert("이름을 입력하세요.");
      return;
    }

    const emailRegex = /^[\w.-]+@[\w.-]+\.[A-Za-z]{2,}$/;
    if (!emailRegex.test(email)) {
      alert("올바른 이메일을 입력하세요.");
      return;
    }

    if (password.length < 8) {
      alert("비밀번호는 8자 이상이어야 합니다.");
      return;
    }

    if (password !== confirmPassword) {
      alert("비밀번호가 일치하지 않습니다.");
      return;
    }

    alert("회원가입 성공!");
    // 이곳에 실제 서버 전송 코드를 추가
  });
</script>

emailRegex : [앞에 영어 소문자와 '-' 포함 최소 1자 이상]@(@ 필수).(.필수)[대소문자 무관 2글자 이상]

 

 

정규식 표현