폼 제출 버튼 비밀번호 적용하기 1가지 방법

폼 제출 버튼 비밀번호 적용하는 1가지 방법을 자바스크립트로 구현했습니다.

updated: 24시간 내 쿠키 적용해 비밀번호를 1번만 입력하면 됩니다.

필요한 경우

아래와 같이 입력 폼이 있을 때 관리자만 입력을 할 수 있게 하고 싶을 경우가 있습니다. 그럼 입력버튼, 제출/submit/Review 등 입력 값을 보내는 버튼을 클릭 시 비밀번호 값을 받아 일치하면 클릭이 이뤄지게 하면 될 것입니다. 그래서~ 챗GPT에게 물어봤습니다. 역시 똑똑한 것이 소스 코드를 알려줬습니다.

폼 제출 버튼 비밀번호 입력 예

폼 제출 버튼 비밀번호 소스 코드

설명을 주석으로 넣어서 좀 보기가 그러네요. 그래서 여기 사이트 13번에서 다운 받을 수 있습니다.

image 7
<script>
// 다음과 같은 제출 버튼을 관리자 암호를 입력해야 클릭 될 수 있게 합니다. 쿠키 적용함
// <button class="btn btn-green" type="submit" id="submit">Submit</button>
function checkPassword() {
    // 로컬 스토리지에서 마지막으로 비밀번호를 입력한 시간을 가져옴
    var lastPasswordTime = localStorage.getItem("lastPasswordTime");
    var currentTime = new Date().getTime(); // 현재 시간을 milliseconds 단위로 가져옴

    // 만약 마지막 비밀번호 입력 시간이 없거나 24시간이 지났다면 비밀번호를 다시 입력받음
    if (!lastPasswordTime || (currentTime - parseInt(lastPasswordTime)) >= (24 * 60 * 60 * 1000)) {
        var password = prompt("비밀번호를 입력하세요:"); // 사용자로부터 비밀번호를 입력받음
        if (password === "1234") { // 입력된 비밀번호가 "1234"인지 확인
            localStorage.setItem("lastPasswordTime", currentTime); // 비밀번호 입력 시간을 로컬 스토리지에 저장
            return true; // 비밀번호가 일치하면 true 반환하여 폼 제출
        } else {
            alert("잘못된 비밀번호입니다."); // 비밀번호가 일치하지 않으면 알림 메시지 출력
            return false; // 폼 제출을 막기 위해 false 반환
        }
    } else {
        // 24시간이 지나지 않았으면 다시 비밀번호를 입력하지 않아도 됨
        return true; // 폼 제출을 허용하기 위해 true 반환
    }
}

// 폼 제출 버튼 클릭 이벤트 처리
// 페이지가 로드될 때 실행되며, 폼 제출 버튼(#submit)이 클릭되면 checkPassword() 함수를 호출하여 사용자로부터 비밀번호를 입력받습니다.
document.addEventListener("DOMContentLoaded", function() {
    var reviewBtn = document.getElementById("submit"); //button의 id 값 입력
    reviewBtn.addEventListener("click", function(event) {
        if (!checkPassword()) {
            event.preventDefault(); // 비밀번호가 일치하지 않으면 폼 제출을 막음
        }
    });
});
</script>

실제 적용한 사이트 예

위 코드는 제가 필요해서 만들 것이라 현재 운영하고 있는 SEO checklist 사이트에 적용해 두었습니다.


단축주소: https://zeze.kr/1rmV

Leave a Comment

함께보면 유용한 글


마우스오버 툴팁 나타내기 1가지 방법

텍스트나 이미지에 마우스를 가져다 가면 추가 설명처럼 툴팁 박스가 보이게 하는 소스(마우스오버 툴팁스) 입니다. 마우스오버 툴팁 나타내기 소스코드 인터넷에서 또는 챗GPT를 통해 필요한 소스를 기록형으로 남기고 있습니다. 다른 글은 여기서 확인 가능 합니다. Tooltips 관련 ... Read more

Cloudflare(클라우드플레어)에 도메인 추가하는 방법 1가지

클라우드플레어에 도메인 추가 하는 방법에 대해 알아보려 합니다. 왜 이 작업이 필요 했을까요? 저 같은 경우는 사이트에 이상한 접속이 보여서 추가하기 시작 했습니다. 서버 디비 로그에 1.5기가 쌓여서 쉐어호스팅 업체의 경고 메일을 받았었고, 최근에 추가 ... Read more

국내 사이트를 위한 대표적인 검색로봇 종류와 robots.txt 작성법 1가지

글로벌 사이트가 아닌 이상 대상은 내국인을 상대로한 웹마케팅을 기획해야 합니다. 지난 주말 작성을 어떻게 하는게 좋은지에 대한 고민도 하고 검색도 해봤습니다. 내가 내린 나만의 결론을 이야기하려 구글 검색이나 구글 SEO에 관심이 있으신 분들에게 조금이라도 도움이 ... Read more

MySQL 문자열 대체 사이트 내용 수정을 쉽게 하는 SQL 쿼리문 1개

ChatGPT가 코딩을 할때 많은 도움이되다보니 생각만 했던 것들을 이젠 실행으로 옮기는 일들이 많네요. 그래서 오늘도 MySQL 문자열 대체 사이트 내용 수정을 쉽게 하는 SQL 쿼리문을 만들어 달라고 요청했고 만족할 만한 결과물을 얻어서 그 과정을 기록형으로 ... Read more