[로그인/ 회원가입] 아이디 비밀번호 필터링 적용하기

회원 가입 기능을 구현할 때 입력 받은 값들이 형식에 맞는지 필터링을 해야합니다.

예를들어 아래와 같은 조건들을 적용해야 합니다.

 

아이디 : "영문과 숫자, 일부 특수문자(._-)만 사용가능, 2-10자 길이. 영문 무조건포함"

비밀번호 : "영문, 숫자는 1개 씩 무조건 포함, 일부 특수문자 사용가능, 8-20자 길이"

비밀번호 확인 : 비밀번호와 일치

 

이러한 복잡한 조건을 확인할 때는 '정규 표현식(Regular Expression)을 이용해 형식을 확인하고 결과를 참 거짓으로 반환하는 것이 좋습니다. 

function is_nickname(asValue) {
    var regExp = /^(?=.*[a-zA-Z])[-a-zA-Z0-9_.]{2,10}$/;
    return regExp.test(asValue);
}

function is_password(asValue) {
    var regExp = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z!@#$%^&*]{8,20}$/;
    return regExp.test(asValue);
}

 

또한 아이디는 중복 확인을 해야 합니다. 서버로 POST 요청을 보내 아이디 존재 여부를 확인합니다. 

function check_dup() {
    let username = $("#input-username").val()
    console.log(username)
    if (username == "") {
        $("#help-id").text("아이디를 입력해주세요.").removeClass("is-safe").addClass("is-danger")
        $("#input-username").focus()
        return;
    }
    if (!is_nickname(username)) {
        $("#help-id").text("아이디의 형식을 확인해주세요. 영문과 숫자, 일부 특수문자(._-) 사용 가능. 2-10자 길이").removeClass("is-safe").addClass("is-danger")
        $("#input-username").focus()
        return;
    }
    $("#help-id").addClass("is-loading")
    $.ajax({
        type: "POST",
        url: "/sign_up/check_dup",
        data: {
            username_give: username
        },
        success: function (response) {

            if (response["exists"]) {
                $("#help-id").text("이미 존재하는 아이디입니다.").removeClass("is-safe").addClass("is-danger")
                $("#input-username").focus()
            } else {
                $("#help-id").text("사용할 수 있는 아이디입니다.").removeClass("is-danger").addClass("is-success")
            }
            $("#help-id").removeClass("is-loading")

        }
    });
}