[JavaScript] 로그인창 미입력시 경고문구 뜨게하기

로그인창 아이디나 비밀번호 미입력시 하단에 경고문구 뜨게하기

<form action="#" method="post" name="login">
 <fieldset>
  <legend>Log In</legend>
  <input type="text" placeholder="ID 아이디" maxlength="20" name="id" id="
  <br>
  <input type="password" placeholder="PW 비밀번호" maxlength="20" name="pw" id="
  <br>
  <input type="submit" value="확인">
  <br>
  <span class="message" id="message"></span>
  </fieldset>
</form>

✅html
1) form 태그를 작성
2) 아이디, 패스워드, 확인 버튼 생성
3) 하단에 빈 span태그를 작성해준다
4) span태그에 class와 id명을 설정하여 css에서 속성과 javascript에서 속성을 설정 할 수 있게한다

window.onload = function() {
    var login = document.login;
    login.onsubmit = function() {
        if(!login.id.value){
            span = document.getElementById("message");
            txt = document.createTextNode("아이디를 입력해주세요");
            span.appendChild(txt);
            login.id.focus();
            return false;
        }
        if(!login.pw.value){
            span = document.getElementById("message");
            txt = document.createTextNode("비밀번호를 입력해주세요");
            span.appendChild(txt);
            login.pw.focus();
            return false;
        }
        else{
            span = document.getElementById("message");
            txt = document.createTextNode("잘못입력하였습니다. 아이디와 비밀번호를 확인해주세요");
            span.appendChild(txt);
            login.id.focus();
            return false;
        }
    }
}

✅Java script 방법1 ->실패
1) window.onload 함수를 선언
2) login객체를 선언
3) login 함수를 작성 if문을 활용
4) 부정문(!)을 활용하여 로그인 작성안할경우 결과값을 입력
5) if문을 만족할 경우 span에 텍스트 생성과 아이디칸에 포커스가 잡힐 수 있게 객체 생성
6) true 페이지로 넘어가지 않게 false를 반환
*pw 부분도 동일

7) else는 if문 의외의 상황시 발생
8) 성공시 페이지가 넘어가지 않도록 잘못입력하였다는 메시지와 false반환
-> 무한 flase로 계속 해서 span이 반복됨

✔️span이 확인을 누르면 무한 반복
✔️결과 값을 경고창 형식으로 바꾸고 함수를 빠져나갈 수 있게 성공 경로를 작성할 예정

 

function validate() {
    const regId = /^[a-zA-Z0-9]{4,12}$/;
    // 아이디 정규식
    const regPw = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$/;
    // 패스워드 정규식, 최소 8 자, 최소 하나의 문자, 하나의 숫자 및 하나의 특수 문자
    const regNull  = /\s/g;
    // 빈값
    
    let id = document.getElementById("id");
    let pw = document.getElementById("pw");
    // 정규식 조건에 위배되었을 때, alert이 출력되는 함수였다.
    // 요 값이 true이고 이걸 부정한 조건(false)일 때 넘어간다.

    // 아이디 정규식 확인
    if (!checkReg(regId, id, "아이디는 4~12자의 영문 대소문자와 숫자로만 입력")) {
        return false;
    }

    // 비밀번호 정규식 확인
    if (!checkReg(regPw, pw, "최소 8자, 최소 하나의 문자, 숫자, 특수 문자를 포함하여 입력")) {
        return false;
    }
    // 비밀번호 빈값확인
    if (!checkNull(pw, "비밀번호를 입력해 주세요")) {
        return false;
    }
}
// 정규식 확인
function checkReg(reg, what, message) {
    // 정규식에 위배되지 않았을때
    let alertMSG = what.parentNode.lastElementChild;
    if (reg.test(what.value)) {
        alertMSG.textContent = ""; // 메시지 공백화
        return true;
    }
    // 정규식에 위배되었을때
    alertMSG.textContent = message; // 메시지 출력
    what.value = ""; // 해당 위치 공백화
    what.focus(); // 해당위치로 포커싱
}
// 빈값 확인
function checkNull(what, message) {
    // 빈값없음
    let alertMSG = what.parentNode.lastElementChild;
    if (what.value !== "") {
        alertMSG.textContent = "해당페이지는 포트폴리오 사이트로 로그인 할 수 없습니다";
        return true;
    }
    // 빈값확인
    alertMSG.textContent = message; // 메시지 출력
    what.focus(); // 해당위치로 포커싱
}


let inputs = document.querySelectorAll('input');
Array.from(inputs).forEach((eachInput) => {
    eachInput.addEventListener('blur', (e) => validate(e));
});
const validation = document.querySelector('#validation');
validation.addEventListener('click', (e) => validate(e));

✅Java script 방법2 ->성공
1)아이디, 패스워드, 빈값에 대한 정규식 작성
2) 아이디 패스워드 선언
3) id 정규식확인 if문 작성 
4) pw 정규식확인 if문 작성 
5) if문을 만족할 경우 공백화, 포커싱을 작성(무한 span방지를 위해 공백화작성)

✔️span이 확인을 누르면 무한 반복해결
✔️빈칸 뿐 아니라 정규식에 대한 부분 오류 메시지 작성

✔️ 하단 let const부분 한번 더 보기