[javascript] 자바스크립트를 이용한 아이디 찾기 기능 구현하기

08 Dec 2023

javascript

이번 글에서는 자바스크립트를 사용하여 간단한 아이디 찾기 기능을 구현하는 방법을 살펴보겠습니다. 사용자가 입력한 이메일 주소를 기준으로 아이디를 찾아주는 기능을 구현해보겠습니다.

필요한 요소

HTML 폼: 이메일을 입력할 수 있는 input 요소와 아이디를 표시할 곳
자바스크립트: 입력된 이메일 주소를 받아와서 아이디를 찾아주는 기능

HTML 폼 작성

<form id="idForm">
  <input type="email" id="emailInput" placeholder="이메일 주소" required>
  <button type="submit">아이디 찾기</button>
</form>
<div id="result"></div>

자바스크립트로 아이디 찾기 기능 구현

document.getElementById('idForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 폼의 기본 동작을 막음
  
  var email = document.getElementById('emailInput').value;
  var foundId = findIdByEmail(email); // 이메일을 기준으로 아이디 찾기

  var resultElement = document.getElementById('result');
  if (foundId) {
    resultElement.textContent = '찾은 아이디: ' + foundId;
  } else {
    resultElement.textContent = '일치하는 아이디가 없습니다.';
  }
});

function findIdByEmail(email) {
  // 여기에 이메일을 기준으로 아이디를 찾는 로직을 작성
}

위 코드에서 findIdByEmail 함수는 입력된 이메일을 기준으로 아이디를 찾아주는 부분으로 구현해야 합니다. 실제 프로젝트에서는 서버와 통신하여 이메일을 기준으로 아이디를 찾아주는 작업이 이루어질 것입니다.

마무리

위 예시는 간단하게 자바스크립트를 사용하여 아이디 찾기 기능을 구현하는 방법을 보여줍니다. 프로젝트의 요구에 맞게 서버와 통신하여 실제로 아이디를 찾는 로직을 구현해야 합니다.

더 많은 정보를 원하시거나 궁금한 점이 있다면, MDN 웹 문서를 참고해보시기 바랍니다.