정규식 + 아이디 중복체크

정규식과 아이디 중복체크를 합쳐보았다.

자바스크립트 : 아이디 길이 0인지 체크 후 - 정규식 체크 후 - 아이디 ajax로 중복 확인

정규식은 소문자, 숫자 조합 3~20길이 필수 입력으로!

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
	function idCheck() {
		const id = document.getElementById('m_id').value;
		const checkResult = document.getElementById('m_id-check');
		const idLength = id.length;
		console.log(idLength);
		const exp = /^(?=.*[a-z])(?=.*\d)[a-z\d]{3,20}$/;
		
		if(idLength == 0){
	    	checkResult.innerHTML = '필수항목입니다'
	    	checkResult.style.color = 'red';
	    }else if(!id.match(exp)){
	    	checkResult.innerHTML = '숫자 포함 3~20자 이내로 작성해 주세요'
	    	checkResult.style.color = 'red';
	    }
		
	    else if(id.match(exp)) {
		$.ajax({
			type : 'post',
			url : 'idDuplicate',
			data : {
				'm_id' : id
			},
			dataType : 'text',
			success : function(result) {
				if (result == "ok") {				
					checkResult.style.color = 'green';
					checkResult.innerHTML = '멋진 아이디네요';
				} else {
					checkResult.style.color = 'red';
					checkResult.innerHTML = '이미 사용중인 아이디';
				}
			},
			error : function() {
				console.log('오타 찾으세요')
			}

		});
	}
	}
	</script>

body에서 required로 필수입력하지 않고 지나가면 잡아주도록! 보충 >> 조건을 만족하지 않으면 회원가입이 안되도록 막는 것 까지 하기

<label for="m_id" class="text-start">아이디</label> 
	<input class="form-control" type="text" name="m_id" id="m_id" placeholder="아이디 20자이내" onblur="idCheck()" size="20" required> 
<span id="m_id-check"> </span>