2021-03-23 TIL(at work)

업데이트: March 23, 2021
4 분 소요

회원의 아이디와 비밀번호 검증하기

As is

많은 사이트에서 회원 가입을 하거나 회원 정보를 수정할 때, 비밀번호에 많은 조건을 부여한다. 예를 들어 특수문자, 영문자, 숫자로만 이루어지게 비밀번호를 설정해야 한다거나 하는 것이다. 이전에 프로젝트를 진행하면서 이런 기능을 구현하고 싶었지만, 당시에는 해내지 못했다. 최근 자바스크립트를 공부하다보니 해당 기능을 구현할 수 있을 것 같아서 다시 도전해보려 한다.
이전에는 사용자로부터 입력받은 값의 길이만 확인하여 회원 가입을 진행했다. 이때에도 비밀번호를 두 번 입력받아, 두 개의 비밀번호가 서로 일치하는지 확인하는 기능을 구현하기는 했었다.

	<form id="userForm" action="add" method="post">
        <div class="mb-3 row">
            <label for="email" class='form-label col-sm-2 col-form-label'>이메일 아이디</label>
            <div class="col-sm-10">
                <input id="inputEmail" type='email' class="form-control" name='email' placeholder="Example@test.com">
            </div>
        </div>
        
        <div class="mb-3 row">
            <label for="password" class='form-label col-sm-2 col-form-label'>비밀번호</label>
            <div class="col-sm-10">
                <input id="inputPassword" type='password' class="form-control" name='password' 
                        placeholder="8~20자로 설정">
            </div>
        </div>
        
        <div class="mb-3 row">
            <label for="passwordConfirm" class='form-label col-sm-2 col-form-label'>비밀번호 확인</label>
            <div class="col-sm-10">
                <input id="passwordConfirm" type='password' class="form-control" name='passwordConfirm' 
                        placeholder="위의 비밀번호와 동일하게 입력">
            </div>
        </div>


      ...

    
	</form>


<script>
    document.querySelector("#userForm").onsubmit = () => {
        var inputEmail = document.querySelector("#inputEmail");
        var inputPassword = document.querySelector("#inputPassword");

        if (inputEmail.value.length < 8) {
            alert("이메일을 알맞게 입력했는지 확인하세요!");
            return false;
        }

        if (inputPassword.value.length < 8) {
            alert("비밀번호를 8자 이상 입력하세요!");
            return false;
        } else if (inputPassword.value != passwordConfirm.value) {
            alert("비밀번호가 일치하지 않습니다.");
            return false;
        }

        if (document.querySelector("#inputEmail").value.length < 1 ||
            document.querySelector("#inputPassword").value.length < 1) {
            alert("모든 항목을 입력해야 회원 가입이 가능합니다.");
            return false;
        }
    };
</script>

To be

이메일 검증

사용자가 입력한 이메일이 유효한 이메일인지 확인하도록 하는 코드를 작성한다. 해당 코드는 <input> 태그에 타입을 지정하면 되므로 꼭 필요하지는 않다고 생각한다.
기존에는 javaScript와 html을 분리하지 않고 하나의 파일로 작성했지만, 앞으로는 두 코드를 분리할 계획이다.
.html에 이메일을 알맞게 입력했는지 확인할 수 있는 버튼을 추가한다.

<form id="userForm" action="add" method="post">
    <div class="mb-3 row">
        <label for="email" class='form-label col-sm-2 col-form-label'>이메일 아이디</label>
        <div class="col-sm-10">
            <input id="inputEmail" type='email' class="form-control" name='email' placeholder="Example@test.com">
        </div>
    </div>

    <button type="button" onclick="verifyEmail();">이메일 확인하기</button>

    ...

</form>

.js에는 이메일을 알맞게 입력했는지 확인하는 메서드를 구현하는데, 정규 표현식을 사용한다.

verifyEmail = function() {
    var emailId = $("#inputEmail").val();

    // 이메일 검증에 사용할 정규식
    var regularExpression = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;

    if (emailId.match(regularExpression) != null) {   
        alert('이메일 형식이 알맞게 입력되었습니다.');
    }
    else {
        alert('이메일 형식이 올바르지 않습니다.');
    }
};

val()는 input, select,textarea 등의 form elements에서 값을 알아낼 때 사용하는 jQuery의 메서드이다.

비밀번호 검증

여느 사이트에서는 비밀번호 설정 조건을 ‘영문(대소문자) 포함, 숫자 포함, 특수 문자 포함, 공백 입력 불가, 비밀번호 자리 8~20자’ 정도로 제한하는 것 같다. 기존에 비밀번호를 두 번 입력받아 두 비밀번호가 같은지 체크하던 방식은 그대로 유지하고, 추가로 제약 조건을 설정하도록 할 것이다.
.html에 비밀번호를 알맞게 입력했는지 확인할 수 있는 버튼을 추가한다.

<form id="userForm" action="add" method="post">

    <div class="mb-3 row">
        <label for="password" class='form-label col-sm-2 col-form-label'>비밀번호</label>
        <div class="col-sm-10">
        <input id="inputPassword" type='password' class="form-control" name='password' 
                placeholder="8~20자로 설정">
        </div>
    </div>
    
    <div class="mb-3 row">
        <label for="passwordConfirm" class='form-label col-sm-2 col-form-label'>비밀번호 확인</label>
        <div class="col-sm-10">
        <input id="passwordConfirm" type='password' class="form-control" name='passwordConfirm' 
                placeholder="위의 비밀번호와 동일하게 입력">
        </div>
    </div>

    <button type="button" onclick="verifyPassword();">비밀번호 확인하기</button>

    ...

</form>

.js에 위의 비밀번호 설정 조건을 확인하는 메서드를 구현한다.

verifyPassword = function() {
    var password1 = $("#inputPassword").val();
    var password2 = $("#passwordConfirm").val();

    // 비밀번호 검증에 사용할 정규식
    var numberCheck = password1.search(/[0-9]/g);
    var englishCheck = password1.search(/[a-z]/ig);
    var specialCheck = password1.search(/[`~!@@#$%^&*|₩₩₩'₩";:₩/?]/gi);

    if(password1.length < 8 || password1.length > 20) {
        alert("비밀번호는 8자리 ~ 20자리 이내로 입력할 수 있습니다.");
        return false;
    } else if(password1.search(/\s/) != -1) {
        alert("비밀번호는 공백을 입력할 수 없습니다.");
        return false;
    } else if(numberCheck < 0 || englishCheck < 0 || specialCheck < 0 ){
        alert("비밀번호는 영문, 숫자, 특수문자를 혼합하여 입력해야 합니다.");
        return false;
    } else if(password1 != password2) {
        alert("비밀번호가 일치하지 않습니다.");
        return false;
    } else {
        console.log("비밀번호를 알맞게 입력했습니다."); 
        return true;
    }
};

위의 경우 특수문자, 영문자, 숫자를 모두 혼합하여 입력하기만 하면 비밀번호로 설정이 가능했지만, 때에 따라서 더욱 복잡한 제약 조건이 설정되어 있기도 하다. 예를 들어, 비밀번호에 아이디가 포함되지 못하도록 할 수도 있고, 같은 문자를 여러번 반복하지 못하도록 할 수도 있다.

verifyPassword = function() {
    var emailId = $("#inputEmail").val();
    var password1 = $("#inputPassword").val();
    var password2 = $("#passwordConfirm").val();

    // 비밀번호 검증에 사용할 정규식
    var numberCheck = password1.search(/[0-9]/g);
    var englishCheck = password1.search(/[a-z]/ig);
    var specialCheck = password1.search(/[`~!@@#$%^&*|₩₩₩'₩";:₩/?]/gi);

    if(password1.length < 8 || password1.length > 20) {
        alert("비밀번호는 8자리 ~ 20자리 이내로 입력할 수 있습니다.");
        return false;
    } else if(password1.search(/\s/) != -1) {
        alert("비밀번호는 공백을 입력할 수 없습니다.");
        return false;
    } else if(numberCheck < 0 || englishCheck < 0 || specialCheck < 0 ){
        alert("비밀번호는 영문, 숫자, 특수문자를 혼합하여 입력해야 합니다.");
        return false;
    } else if(password1.search(emailId) > -1){
        alert("비밀번호에 아이디가 포함되었습니다.");
        return false;
    } else if(/(\w)\1\1\1\1/.test(password1)){
        alert('같은 문자를 5번 이상 사용할 없습니다.');
        return false;
    } else if(password1 != password2) {
        alert("비밀번호가 일치하지 않습니다.");
        return false;
    } else {
        console.log("비밀번호를 알맞게 입력했습니다."); 
        return true;
    }
};

정규식에서 쓰이는 메서드

exec() : 대응되는 문자열을 찾는 RegExp 메소드이다. 정보를 가지고 있는 배열을 반환하고, 대응되는 문자열을 찾지 못했다면 null을 반환한다.
test() : 대응되는 문자열이 있는지 검사하는 RegExp 메소드이다.. true 나 false를 반환한다.
match() : 대응되는 문자열을 찾는 RegExp 메소드이다. 정보를 가지고 있는 배열을 반환하고, 대응되는 문자열을 찾지 못했다면 null을 반환한다.
search(): 대응되는 문자열이 있는지 검사하는 String 메소드이다. 대응된 부분의 인덱스를 반환하고, 대응되는 문자열을 찾지 못했다면 -1을 반환한다.
replace() : 대응되는 문자열을 찾아 다른 문자열로 치환하는 String 메소드이다.
split() : 정규식 혹은 문자열로 대상 문자열을 나누어 배열로 반환하는 String 메소드이다.
출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions

마무리

최근 회사에서 여러 프로젝트 소스를 살펴볼 기회가 있었는데, 어떤 프로젝트에서는 값의 유효성을 검증하는 과정을 프론트 엔드(javaScript)에서 진행하고 또 어떤 프로젝트에서는 백엔드(java)에서 값의 유효성을 검증했다. 개인적인 생각으로는, 비밀번호와 같이 값의 유효성을 검증하여 바로바로 사용자가 입력한 값을 수정하도록 유도할 때에는 프론트엔드에서 값을 검증하면 될 것 같고, 전화번호를 입력받아 값의 유효성을 검사하는데, 굳이 사용자로부터 값을 다시 입력받지 않고 개발자가 임의로 숫자를 제외한 다른 값은 제거하여 DB에 저장할 수 있는 경우에는 백엔드에서 값의 유효성을 검증하면 될 것 같다.

Twitter Facebook LinkedIn

유지연

2021-03-23 TIL(at work)

회원의 아이디와 비밀번호 검증하기

As is

To be

이메일 검증

비밀번호 검증

정규식에서 쓰이는 메서드

마무리

공유하기

참고

2022-02-22 TIL(at work)

[HTTP] 8. HTTP 헤더2 - 캐시와 조건부 요청

[HTTP] 7. HTTP 헤더1 - 일반 헤더

[HTTP] 6. HTTP 상태 코드