유효성 일치 여부

📍 로그인관련 유효성 여부 확인 

 

이메일, 비밀번호 입력하지 않고 로그인을 눌렀을때 알럿창 넣기

 

1. js 파일 생성 

 

HTML 코드 

1.  onsubmit="return loginValidate()"

 

로그인 클릭 시 form 태그 제출 막고싶다!  두가지 방법 ! 

1. button 타입을 button으로 지정 

2. onsubmit 지정해서 false 값을 리턴하면 서버에 제출하지 않는다 ! 

<form action="member/login" method="post" name="login-form" onsubmit="return loginValidate()">

    <!-- 아이디(이메일)/비밀번호/로그인버튼 영역 -->
    <fieldset id="id-pw-area">
        <section>
            <input type="text" name="inputEmail" placeholder="아이디(이메일)"
                value="${cookie.saveId.value}">
            <%--현재 페이지 쿠키 중 "savdId" 의 내용을 출력--%>
            <input type="password" name="inputPw" placeholder="비밀번호">
        </section>

        <section>
            <button>로그인</button>
        </section>

    </fieldset>

js 코드 

console.log("main.js loaded");

//로그인 시 이메일(아이디)/비밀번호 입력 확인 
//-> 미 작성 시 alert()이용해서 메세지를 출력하고 
//   로그인 form태그의 제출을 막는 기본 이벤트 제거 진행 
function loginValidate() {// 로그인 유효성 검사 

    //Validate : 유효하다.
    //invalidate : 무효하다. 

    /* name 속성은 배열로 작성 */
    /* 이메일 입력 input 요소 */
    const inputEmail = document.getElementsByName("inputEmail")[0];

    //비밀번호 입력 input 요소 
    const inputPw = document.getElementsByName("inputPw")[0];

    //이메일이 입력되지 않은 경우 false 반환 
    if (inputEmail.value.trim().length == 0) {
        //문자열.trim() : 문자열 양쪽 공백을 제거 
        //문자열.length : 문자열 길이(몇글자인지 알려줌)
        alert("이메일을 입력해주세요");

        //이메일input 입력된 내용을 모두 삭제
        inputEmail.value="";
        //이메일 input에 포커스를 맞춰줌
        inputEmail.focus();
        //기본 이벤트 제거를 위해 false 반환
        return false;
    }
    //비밀번호 입력하지 않은 경우 
    if (inputPw.value.trim()== "") {
        alert("비밀번호를 입력해주세요");
        inputPw.value="";
        inputPw.focus();
        return false;
    }

}

💡 getElementsByName : 배열로 받아야한다 ! 

---

📍  마이페이지 유효성 검사

닉네임, 핸드폰 번호 넣고 수정하기 눌렀을때 유효성 검사  및 정규식 넣기

 

HTML 코드 

1.  onsubmit="return infoValidate()"

<form action="info" method="POST" name="myPage-form" onsubmit="return infoValidate()">

            <div class="myPage-row">
                <label>닉네임</label> <input type="text" name="memberNickname" id="memberNickname"
                    value="${loginMember.memberNickname}" maxlength="10">
            </div>

            <div class="myPage-row">
                <label>전화번호</label> <input type="text" name="memberTel" id="memberTel"
                    value="${loginMember.memberTel}" maxlength="11">
            </div>

            <!-- 주소 -->				<!-- fn:splite(문자열,'구분자') 문자열을 구분자를 통해 쪼갤거야! -->
            <c:set var="addr" value="${fn:split(loginMember.memberAddress,',,')}"/>

            <div class="myPage-row info-title">
                <span>주소</span>
            </div>

            <div class="myPage-row info-address">
                <input type="text" name="memberAddress" value="${addr[0]}" maxlength="6">
                <button type="button" id="info-address-btn">검색</button>
            </div>

            <div class="myPage-row info-address">
                <input type="text" name="memberAddress" value="${addr[1]}">
            </div>

            <div class="myPage-row info-address">
                <input type="text" name="memberAddress" value="${addr[2]}">
            </div>

            <button id="info-update-btn">수정하기</button>

        </form>

js 코드 

// 내 정보 수정 유효성 검사
function infoValidate(){

    const memberNickname = document.getElementById("memberNickname");
    const memberTel = document.getElementById("memberTel");

    const regExp1= /^[a-zA-Z0-9가-힣]{2,10}$/; // 닉네임 정규식
    const regExp2= /^0(1[01679]|2|[3-6][1-5]|70)\d{3,4}\d{4}$/;  // 전화번호 정규식

    // 닉네임 유효성 검사
    if(memberNickname.value.length == 0){ // 미작성 시 : 닉네임을 입력해주세요.
        alert("닉네임을 입력해주세요.");
        memberNickname.focus();
        return false;
    }

    if(!regExp1.test(memberNickname.value)){ // 유효하지 않은 경우
        alert("닉네임은 영어/숫자/한글 2~10글자 사이로 작성해주세요.");
        memberNickname.focus();
        return false;
    }


    // 전화번호 유효성 검사
    if(memberTel.value.length == 0){ // 미작성 시 : 전화번호를 입력해주세요.(-제외)
        alert("전화번호를 입력해주세요.(-제외)");
        memberTel.focus();
        return false;
    }

    if(!regExp2.test(memberTel.value)){ // 유효하지 않은 경우
        //alert("전화번호 형식이 올바르지 않습니다.");
        //memberTel.focus();
        //return false;

        /* 경고출력+포커스+false반환 메소드 사용 */
        return printAlert(memberTel,"전화번호 형식이 올바르지 않습니다.")
    }

    return true; // true를 반환해서 form 제출 수행
}

//경고 출력 + 포커스 + false 반환 함수 
function printAlert(el, message){ //el : 우리가 선택한 요소 

    alert(message);
    el.focus();
    return false;
}

---

📍  탈퇴 유효성 검사 

비밀번호와 체크를 하고 수정하기 눌렀을때 유효성 검사 및 정규성 넣기 

HTML 코드 

1. onsubmit="return secessionValidate()"

<form action="secession" method="POST" name="myPage-form" onsubmit="return secessionValidate()">

<div class="myPage-row">
    <label>비밀번호</label> <input type="password" name="memberPw" maxlength="30" id="memberPw">
</div>

<div class="myPage-row info-title">
    <label>회원 탈퇴 약관</label>
</div>

<pre id="secession-terms">
제1조
이 약관은 샘플 약관입니다.

① 약관 내용 1

② 약관 내용 2

③ 약관 내용 3

④ 약관 내용 4


제2조
이 약관은 샘플 약관입니다.

① 약관 내용 1

② 약관 내용 2

③ 약관 내용 3

④ 약관 내용 4
</pre>
<div>
    <input type="checkbox" id="agree" name="agree" >
    <label for="agree">위 약관에 동의합니다.</label>
</div>

<button id="info-update-btn">탈퇴하기</button>

js 코드 

function secessionValidate() {

    const agree = document.getElementById("agree");
    const memberPw = document.getElementById("memberPw");

    //비밀번호 미작성
    if (memberPw.value.trim().length == 0) {
        return printAlert(memberPw, "비밀번호를 입력해주세요.")
    }

    //약관 동의 체크 여부(체크박스요소.checked : 체크시 true 해제시 false 반환)
    if (!agree.checked) { //체크를 안했을 때
        return printAlert(agree, "약관 동의 후 탈퇴 버튼을 클랙해주세요.")
    }

    // 정말 탈퇴할지 확인 
    // - confrim("내용") : 대화 상자에 확인/ 취소 생성 
    //                     확인 클릭 시 true / 취소 클릭 시 false

    if (!confirm("정말 탈퇴 하시겠습니까?")) { // 취소를 누른 경우 
        return false
    }

    return true;

}