[javascript] SweetAlert와 비밀번호 확인 기능

24 Nov 2023

javascript

안녕하세요! 이번에는 SweetAlert 라이브러리와 함께 사용하여 비밀번호 확인 기능을 구현하는 방법에 대해 알아보겠습니다.

SweetAlert란?

SweetAlert는 사용자에게 더 효과적이고 사용자 친화적인 알림 창을 제공하는 자바스크립트 라이브러리입니다. 일반적인 JavaScript alert() 함수보다 더 다양한 기능과 스타일을 제공해 줍니다.

비밀번호 확인 기능 구현하기

비밀번호를 입력받는 폼에서 SweetAlert를 사용하여 팝업 창을 띄워 비밀번호를 재확인하는 기능을 구현해 보겠습니다.

먼저, SweetAlert 라이브러리를 HTML 문서에 추가하고, 비밀번호 입력 폼과 확인 버튼을 만들어 줍니다.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="sweetalert2.min.css">
</head>
<body>
  <form id="passwordForm">
    <input type="password" id="passwordInput">
    <button type="button" onClick="confirmPassword()">확인</button>
  </form>

  <script src="sweetalert2.min.js"></script>
  <script src="example.js"></script>
</body>
</html>

위의 코드에서 sweetalert2.min.css 파일은 SweetAlert 스타일을 적용하기 위한 CSS 파일이며, sweetalert2.min.js 파일은 SweetAlert 라이브러리 코드를 포함한 JavaScript 파일입니다. example.js는 우리가 실제 비밀번호 확인 기능을 구현할 JavaScript 파일입니다.

이제 example.js 파일을 생성하고 다음과 같이 코드를 작성해 보겠습니다.

function confirmPassword() {
  const passwordInput = document.getElementById('passwordInput').value;

  Swal.fire({
    title: '비밀번호 재확인',
    input: 'password',
    inputLabel: '비밀번호를 다시 입력해 주세요',
    showCancelButton: true,
    confirmButtonText: '확인'
  }).then((result) => {
    if (result.value === passwordInput) {
      Swal.fire('비밀번호 확인 성공!', '', 'success');
    } else {
      Swal.fire('비밀번호가 일치하지 않습니다!', '', 'error');
    }
  });
}

위의 코드에서 confirmPassword() 함수는 확인 버튼을 클릭했을 때 호출되는 함수입니다. document.getElementById('passwordInput').value를 통해 입력받은 비밀번호를 가져오고,

Swal.fire() 함수를 사용하여 SweetAlert 팝업 창을 생성합니다. 이 팝업 창은 비밀번호를 입력받는 창으로 생성되며, 확인 버튼을 누를 때 입력된 비밀번호와 비교하여 일치 여부에 따라 SweetAlert로 성공 또는 실패 메시지를 표시합니다.

위와 같이 코드를 작성하고 웹 브라우저에서 HTML 파일을 실행해 보면, 비밀번호를 입력한 후 확인 버튼을 클릭하면 SweetAlert 팝업 창이 뜨고, 재확인 비밀번호와 일치 여부에 따라 성공 또는 실패 메시지가 표시되는 것을 확인할 수 있습니다.

결론

이번 포스트에서는 SweetAlert 라이브러리를 사용하여 비밀번호 확인 기능을 구현하는 방법에 대해 알아보았습니다. SweetAlert를 활용하면 사용자에게 보다 시각적으로 효과적인 메시지를 제공할 수 있으며, 사용자 경험을 향상시킬 수 있습니다.