📝 오늘 배운 것

💡 JavaScript 정규표현식으로 입력 값 검증하기

html

<form>
        <div class="mb-3">
            <label for="exampleInputEmail1" class="form-label">아이디</label>
            <input type="text" class="form-control" id="username" aria-describedby="emailHelp">
        </div>
        <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">비밀번호</label>
            <input type="password" class="form-control" id="password">
        </div>
        <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">비밀번호 재확인</label>
            <input type="password" class="form-control" id="password2">
        </div>
        <div class="file mb-3">
            <label class="img" for="inputGroupFile01" style="margin-bottom: 5px;">프로필 사진</label>
            <input type="file" class="form-control" id="profile_img">
        </div>
        <div class="mb-3">
            <label for="exampleInputEmail1" class="form-label">프로필 소개</label>
            <input type="text" class="form-control" id="introduce" aria-describedby="emailHelp">
        </div>
        <div class="mb-3">
            <label for="exampleInputEmail1" class="form-label">관심있는 장르</label>
            <input type="text" class="form-control" id="favorite" aria-describedby="emailHelp">
        </div>
        <button type="button" class="btn btn-primary" id='signupbtn' onclick="handleSignup()" style="display: block; width: 150px; margin: auto; margin-top: 50px;">가입하기</button>
    </form>

우선 코드가 길어지기 때문에 body 태그 안 코드만 가져왔다.
class는 css에서 사용할 것이고, id 값으로 해당 인풋 태그를 호출할 것이다.

javascript

let username = document.querySelector('#username')
let password = document.querySelector('#password')
let passwordCheck = document.querySelector('#password2')
let introduce = document.querySelector('#introduce')
let favorite = document.querySelector('#favorite')
let btn = document.querySelector('#signupbtn')

btn.addEventListener('click', () => {
    // 아이디 정규식 (4~12자의 영문 대소문자와 숫자)
    var userCheck= RegExp(/^[a-zA-Z0-9]{4,12}$/); 
    // 패스워드 정규식 (영문 대문자와 소문자, 숫자, 특수문자를 하나 이상 포함하여 8~16자)
    var passwdCheck = RegExp(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^*()\-_=+\\\|\[\]{};:\'",.<>\/?]).{8,16}$/);

    // 아이디 유효성 검사
    if (username.value == ''){
        alert('아이디를 입력해주세요!')
        username.focus();
        return false;
    }
    else if(!userCheck.test(username.value)){
        alert("아이디는 4~12자의 영문 대소문자와 숫자로만 입력해주세요!");
        username.focus();
        return false;
    }
    // 비밀번호 공백 검증
    if (password.value == ''){
        alert('비밀번호를 입력해주세요!')
        password.focus();
        return false;
    }

    // 비밀번호 유효성 검사
    else if(!passwdCheck.test(password.value)){
        alert("비밀번호는 영문 대문자와 소문자, 숫자, 특수문자를 하나 이상 포함하여 8~16자로 입력해주세요!");
        password.focus();
    }
    // 비밀번호 재확인 공백 검증
    else if (passwordCheck.value == ''){
        alert('비밀번호 재확인을 해주세요!')
        passwordCheck.focus();
        return false;
    }
    // 비밀번호와 비밀번호 재확인 일치 여부 검증
    else if (password.value != passwordCheck.value){
        alert('비밀번호가 일치하지 않습니다!')
        passwordCheck.focus();
        return false;
    }
    // 아이디 비밀번호 값 중복 검증
    else if (username.value == password.value){
        alert('아이디와 비밀번호는 같을 수 없습니다!')
        password.focus();
        return false;
    }
})

우선 각 input 박스의 id값 으로 document.querySelector를 사용하여 각각의 변수에 담았다.
그리고 백엔드에 데이터를 주고, 받을 js파일과 입력 값을 검사 할 js파일을 분리했고, html에서 함수가 실행되는 버튼은 백엔드용 js에 선언되어 있어 addEventListener를 통해 버튼에 이벤트를 추가해주었다.

처음에는 정규식 없이 모든 입력 값에 공백을 검증하고, username과 password 그리고 password와 passwordCheck가 같을 경우 알럿을 띄웠다. 그리고 나서는 문득 정규식을 거친 가입절차를 경험했던 기억이 떠올라 아이디와 비밀번호만 정규식을 적용해서 사용자의 입력 값을 검사했더니 여러 버그들이 많이 보였다(연속 알럿, 후 순위 알럿으로 포커싱 등)

일단 문제는 모든 검증 절차 하나하나마다 if문으로 시작해서 바로 끝나게 코드를 입력했고, 검증을 하는 순서가 없었다.

백엔드의 user 모델에서 아이디와 비밀번호를 제외한 값은 blank를 true로 설정해두었기 때문에 아이디와 비밀번호를 필수로 입력받고, 아이디와 비밀번호를 검증하는 과정을 분리해야겠다고 생각했다.

하지만 그럼에도 불구하고 연속되는 알럿이 생겨 정규식으로 검증을 할 경우 공백 검증이 굳이 필요한가? 라는 생각이 들어 입력 값이 빈 값일 때 알럿을 띄우는 코드를 지우고 테스트했더니 정규식을 사용한 검증에서 공백도 검증하는 것을 알게되었다.

# 이 두 가지 검증은 불필요하여 공백 검증을 삭제
// 비밀번호 공백 검증
    if (password.value == ''){
        alert('비밀번호를 입력해주세요!')
        password.focus();
        return false;
    }

    // 비밀번호 유효성 검사
    else if(!passwdCheck.test(password.value)){
        alert("비밀번호는 영문 대문자와 소문자, 숫자, 특수문자를 하나 이상 포함하여 8~16자로 입력해주세요!");
        password.focus();
    } 

비밀번호 검증을 삭제 후 검증할 순서를 생각해보니 우선 값이 있어야 하기 때문에 정규식을 통한 유효성 검사로 공백과 함께 검사해서 통과한 후 👉 비밀번호 재확인 값이 있는지 공백 검사를 하고 통과하면 👉 비밀번호와 재확인 값이 일치한지 비교해서 👉 아이디와 비밀번호가 같은지 검사해서 검증 절차를 끝나게 된다.

만약 절차를 통과하지 못하는 지점이 있다면 다음 절차를 통과하지 않고 올바른 값을 입력해야 다음 값으로 넘어간다.

// 비밀번호 유효성 검사
    else if(!passwdCheck.test(password.value)){
        alert("비밀번호는 영문 대문자와 소문자, 숫자, 특수문자를 하나 이상 포함하여 8~16자로 입력해주세요!");
        password.focus();
    }
    // 비밀번호 재확인 공백 검증
    else if (passwordCheck.value == ''){
        alert('비밀번호 재확인을 해주세요!')
        passwordCheck.focus();
        return false;
    }
    // 비밀번호와 비밀번호 재확인 일치 여부 검증
    else if (password.value != passwordCheck.value){
        alert('비밀번호가 일치하지 않습니다!')
        passwordCheck.focus();
        return false;
    }
    // 아이디 비밀번호 값 중복 검증
    else if (username.value == password.value){
        alert('아이디와 비밀번호는 같을 수 없습니다!')
        password.focus();
        return false;
    }

처음에는 무슨 생각으로 모든 검사 코드 하나하나 if문으로 설정한지 모르겠다..🙉
비록 완성도가 높은 정규식 사용법은 아니지만 생각한 로직은 구현한 것 같다.
다음에는 검사할 순서를 먼저 생각하고 여러 타입의 값과 좀 더 완성도가 높은 검증 절차를 js로 구현해봐야겠다.