[jQuery] 영문, 숫자, 한글, 특수문자 정규식 입력 체크 (영문 숫자만, 한글만, 영문 숫자 특수문자 조합)

아래 소스 코드는 입력 필드에 대해 입력 값 체크 로직을 구성하였습니다.
입력 필드에 대해 keyup 이벤트를 통해서 입력된 값에 대해 정규식을 사용해 모든 문자열을 체크하고 정규식에 위배되는 문자를 찾아내고 빈 문자열로 대체합니다. 입력 필드에 대해서 원하는 형식으로 데이터를 입력하도록 유도하고, 잘못된 데이터가 입력되는 것을 방지할 수 있으며 데이터의 정확성을 보장하기 위해 사용됩니다.

 

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
//영문,숫자만 입력가능 
$(document).on('keyup', '#user', function() {
	$(this).val($(this).val().replace(/[^a-zA-Z0-9]/g, ''));
});
// 한글만 입력 가능
$(document).on('keyup', '#name', function() {
    $(this).val($(this).val().replace(/[^가-힣]/g, ''));
});
//영문,숫자,@, .,_,-만 입력 가능
$(document).on('keyup', '#email', function() {
	$(this).val($(this).val().replace(/[^a-zA-Z0-9@._-]/g, ''));
});
</script>
<div class="inputBox">
	<label for="user">아이디 : </label>
	<input type="text" name="user" id="user" placeholder="영문소문자/숫자로 입력해주세요.">
</div>
<div class="inputBox">
	<label for="name">이름 : </label>
	<input type="text" name="name" id="name" placeholder="한글만 입력해주세요.">
</div>
<div class="inputBox">
	<label for="email">E-mail : </label>
	<input type="email" name="email" id="email"  placeholder="your@email.com">
</div>

 

 

소스코드 정규식 체크화면