회원가입 유효성 검사

2022.05.06

 

회원가입 페이지 제작시

정보 유효성 검사

function check(){
	let checkid = /^[a-zA-Z0-9]{4,12}$/;
    let checkpw = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{4,20}$/;
    let checkname = /^[가-힝a-zA-Z]{2,}$/;
    let checkemail = /[0-9a-zA-Z-_.]/;
    
    if (idval.val() == "") {
        // alert("아이디 입력바람");
        idval.focus();
        $(".idError").text(" 아이디 입력바람")
        return false;
    } else {
        $(".idError").text("")
    }
    if (!checkid.test(idval.val())) {
        // alert("아이디 형식 맞추셈");
        idval.focus();
        $(".idError").text(" 4~12자의 대소문자와 숫자만 입력가능")
        return false;
    } else {
        $(".idError").text("")
    }

    if (pwval.val() == "") {
        // alert("패스워드 입력바람")
        pwval.focus();
        $(".pwError").text(" 패스워드 입력바람")
        return false;
    } else {
        $(".pwError").text("")
    }
    if (!checkpw.test(pwval.val())) {
        // alert("패스워드 형식 맞추셈");
        pwval.focus();
        $(".pwError").text(" 4~20자의 하나의 대소문자와 하나의 숫자 필수 입력")
        return false;
    } else {
        $(".pwError").text("")
    }
    if (repwval.val() == "") {
        // alert("비번확인 입력바람")
        repwval.focus();
        $(".repwError").text(" 비번확인 입력바람")
        return false;
    } else {
        $(".repwError").text("")
    }
    if (repwval.val() != pwval.val()) {
        // alert("패스워드가 일치하지 않음")
        repwval.focus();
        $(".repwError").text(" 비번이 일치 하지 않음")
        return false;
    } else {
        $(".repwError").text("")
    }
    if (nameval.val() == "") {
        // alert("이름 입력바람")
        nameval.focus();
        $(".nameError").text(" 이름 입력바람")
        return false;
    } else {
        $(".nameError").text("")
    }
    if (!checkname.test(nameval.val())) {
        // alert("이름 형식 맞추셈");
        nameval.focus();
        $(".nameError").text(" 2자 이상의 한글, 대소영문자 입력")
        return false;
    } else {
        $(".nameError").text("")
    }
    if (emailval.val == "") {
        // alert("이메일 입력바람");
        emailval.focus();
        $(".emailError").text(" 이메일 입력바람")
        return false;
    } else {
        $(".emailError").text("")
    }
    if (!checkemail.test(emailval.val())) {
        // alert("이메일 형식 맞추셈");
        emailval.focus();
        $(".emailError").text(" 대소영문자, 숫자, -, _, .만 입력 가능")
        return false;
    } else {
        $(".emailError").text("")
    }

    $.ajax({
        type: "POST",
        url: "/sign/idch",
        data: {id_give: idval.val()},
        success: function (response) {
            // alert(response['msg'])
            let sameid = response["sameid"]
            // console.log(sameid)
            if (sameid == null) {
                // alert("사용 가능")
                $.ajax({
                    type: "POST",
                    url: "/sign/info",
                    data: {
                        id_give: idval.val(),
                        pw_give: pwval.val(),
                        name_give: nameval.val(),
                        email_give: (emailval.val()) + ($("#domainval").val())
                    },
                    success: function (response) {
                        alert(response['msg'])
                        window.location.reload();
                    }
                })


            } else if (idval.val() == sameid['id']) {
                alert("중복아이디!")
                idval.focus();
                $(".idError").text(" 중복아이디 입니다")
            }

        }
    })
}
}

요약하자면 input 값이 비어있으면 '입력해주세요' 경고문을 넣어주고,

정규식을 통해 형식이 안맞아도 '형식지키세요' 경고문을 넣어주고,

모두 이상 없으면 다음 값을 확인하고
모두 이상 없이 진행되면 Ajax콜로 서버에 값을들 보내주어  db에 저장함

 

근데 이 코드를 반복문을 돌리면 좀더 간단하게 표현 가능하다

function check() {
    let checkid = /^[a-zA-Z0-9]{4,12}$/;
    let checkpw = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{4,20}$/;
    let checkname = /^[가-힝a-zA-Z]{2,}$/;
    let checkemail = /[0-9a-zA-Z-_.]/;

    let vallist = [idval, pwval, repwval, nameval, emailval]
    let errorlist = [$(".idError"), $(".pwError"), $(".repwError"), $(".nameError"), $(".emailError")]
    let checklist = [checkid, checkpw, checkpw, checkname, checkemail]
    let msglist = [" 4~12자의 대소문자와 숫자만 입력가능", " 4~20자의 하나의 대소문자와 하나의 숫자 필수 입력", " 4~20자의 하나의 대소문자와 하나의 숫자 필수 입력", " 2자 이상의 한글, 대소영문자 입력", " 대소영문자, 숫자, -, _, .만 입력 가능"]

    for (let i = 0; i < vallist.length; i++) {
        if (vallist[i].val() == "") {
            console.log((vallist[i].val()))
            vallist[i].focus();
            errorlist[i].text(" 입력바람")
            return false;
        } else {
            console.log((vallist[i].val()))
            errorlist[i].text("")
        }
        if (!checklist[i].test(vallist[i].val())) {
            vallist[i].focus();
            errorlist[i].text(msglist[i])
            return false;
        } else {
            errorlist[i].text("")
        }
    }
    if (repwval.val() != pwval.val()) {
        // alert("패스워드가 일치하지 않음")
        repwval.focus();
        $(".repwError").text(" 비번이 일치 하지 않음")
        return false;
    } else {
        $(".repwError").text("")
    }
    $.ajax({
        type: "POST",
        url: "/sign/idch",
        data: {id_give: idval.val()},
        success: function (response) {
            // alert(response['msg'])
            let sameid = response["sameid"]
            // console.log(sameid)
            if (sameid == null) {
                // alert("사용 가능")
                $.ajax({
                    type: "POST",
                    url: "/sign/info",
                    data: {
                        id_give: idval.val(),
                        pw_give: pwval.val(),
                        name_give: nameval.val(),
                        email_give: (emailval.val()) + ($("#domainval").val())
                    },
                    success: function (response) {
                        alert(response['msg'])
                        window.location.reload();
                    }
                })


            } else if (idval.val() == sameid['id']) {
                alert("중복아이디!")
                idval.focus();
                $(".idError").text(" 중복아이디 입니다")
            }

        }
    })
}

리스트를 i가 돌면서 순서만 잘 맞춰준다면

id에 맞는 값을 보고 틀리면 id 오류 경고창을 보여준다

중간에 비밀번호와 비밀번호 확인은 따로 일치하는지만 확인해준다