[javascript] 폼 입력값의 유효성을 확인하는 함수를 작성하는 방법은?

05 Dec 2023

javascript

먼저, HTML 폼 엘리먼트에 이벤트 리스너를 추가하여 폼이 제출될 때 함수가 실행되도록 할 수 있습니다. 다음 예제 코드에서는 ‘submit’ 이벤트에 대한 리스너를 추가하는 방법을 보여줍니다:

<form id="myForm">
  <input type="text" id="name" required>
  <input type="email" id="email" required>
  <input type="password" id="password" required>
  <input type="submit" value="Submit">
</form>

document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault();
  validateForm();
});

위 예제에서 validateForm 함수는 폼 입력값의 유효성을 확인하는 함수입니다. 이 함수를 다음과 같이 구현할 수 있습니다:

function validateForm() {
  var name = document.getElementById("name").value;
  var email = document.getElementById("email").value;
  var password = document.getElementById("password").value;

  // 입력값 유효성 체크
  if (name === "") {
    alert("이름을 입력해주세요.");
    return false;
  }

  if (email === "") {
    alert("이메일을 입력해주세요.");
    return false;
  }

  if (password === "") {
    alert("비밀번호를 입력해주세요.");
    return false;
  }

  // 유효성 체크를 통과한 경우
  // 폼을 서버로 제출하거나 추가적인 작업 수행

  return true;
}

위 예제에서는 각 입력 필드에 대해 비어있는지 확인하고, 비어있는 경우에는 알림창을 띄워 유효성 검사를 통과하지 못하도록 합니다. 유효성 검사를 통과한 경우에는 폼을 서버로 제출하거나 추가작업을 수행할 수 있습니다.

이와 같이 JavaScript를 사용하여 폼 입력값의 유효성을 확인하는 함수를 작성할 수 있습니다.