회원가입 정규표현식으로 체크하기✔️

요즘 어느사이트던 회원가입을 할때 정해진 규칙에 따라 문자,숫자열을 기입해야 통과가 되는데 그 기본적 원리에 대해 알아보겠습니다❗️

기본적인 아이디,비밀번호를 이용한 회원가입 폼박스

<form action="/register" method="post" class="userjoin">
	<div class="idbox">
        <label for="userid">아이디</label>
        <input type="text" id="userid" name="userid">
    </div>
    <div class="pwbox">
        <label for="pwd">비밀번호</label>
        <input type="password" id="pwd" name="pwd">
    </div>
    <div class="pwcheck">
        <label for="pwcheck">비밀번호 확인</label>
        <input type="password" id="pwdcheck">
    </div>
    <button>가입</button>
</form>

기본적인 아이디,비밀번호,비밀번호확인을 통해 회원가입을 하는 폼박스를 하나 만들어 보았습니다. (button은 기본 type이 submit입니다 submit일시 생략가능)

이렇게 하면 어떻게 치던 정보가 그냥 넘어가서 기준이 되는 양식을 맞추지 못하겠죠??
그렇기에 자바스크립트(or jquery)에서 정규표현식을 사용해 필터링을 해보겠습니다

아이디 정규표현식 코드작성 해보기

<script>
    $('.userjoin').on('submit',()=>{
    	let idval = $('#userid').val()
        let idvalcheck = /^[a-z0-9]+$/
        if (!idvalcheck.test(idval) || idval.length<6){
        	alert('아이디는 영소문자,숫자로 구성된 6글자 이상으로 조합하시오.')
            $('#userid').focus()
            return false
        }
    })
</script>

이런식으로 정규표현식 /^[a-z0-9]+$/ 은 a-z소문자 아무거나,0-9숫자 아무거나 사용할수 있다는 뜻이며 +는 영소문자,숫자가 한번씩 나와야 한다는 뜻이다
또한 length로 문자길이를 측정해 정규표현식도 통과해야하며 6글자 이상으로 쓰여야 통과가 되며,
아닌경우 idbox에 다시 포커스가 되며 새로 작성을 해야한다.

비밀번호 정규표현식 코드작성해보기

<script>
	$('.userjoin').on('submit',()=>{
    	let pwdval = $('#pwd').val()
        let pwdokval = $('#pwdcheck').val()
        let pwdcheck = /^[a-zA-Z0-9]+$/
        if (!pwdcheck.test(pwdval) || pwd.length<8){
        	alert('비밀번호는 영대소문자,숫자로 구성된 8글자 이상으로 조합하시오.')
        	$('#pwd').focus()
        } else {
        	if (pwdokval){
            	if (pwd!==pwdokval){
                	alert('비밀번호가 일치하지 않습니다.')
                    $('#pwdcheck').focus()
                    return false
                } 
            } else {
            	alert('비밀번호확인을 입력하시오.')
                $('#pwdcheck').focus()
                return false
            }
        }
    }
</script>

비밀번호체크는 비밀번호확인이랑 같이 체크를 해주는데
첫번째로 정규표현식에 맞는지 확인하고 맞다면 else문에서 다시 if문을 사용해 비밀번호랑 비밀번호 확인이 같은지 확인해줍니다. 그리고 pwdokval에 아무것도 쓰여있지 않다면 else문으로 비밀번호 확인을 입력해 달라고 코드를 짜보았습니다.

회원가입할때 귀찮다고만 생각했던것들인데 어쩌면 회원정보를 더 안전히 보호하기 위해 정해진 규칙을 만들어 둔 것이 배우고보니 사용자를 위한것이고 더 복잡한 것이라는걸 새삼 느끼게 되었습니다.😂