제가 사용하던 자바스크립트 유효성검사 소스코드입니다.

안녕하세요!
UI개발을 하다보면 폼 요소 코딩을 많이 할 때가 있습니다. 처음 시작할 때는 마크업만 주고 했던 것이 경력이 늘어나면서 접근성도 생각하게 되고 더 나아가서는 유효성검사도 같이 넣어서 줄 때가 있습니다.

매번 스크립트 작성을 해서 넣는다는 것이 얼마나 시간을 투자를 해야하고 살짝 귀찮니즘도 오고 말이죠…
그래서 제가 구글링도하면서 찾은 것들을 조합해서 만들어놓은 것을 저만 쓰기는 아까워서 같이사용하고자 공유하고자합니다.

기본 폼

사용예제

<label for="name" class="frmbox input_txt">
	<!-- required 속성은 필수입력!! -->
	<input type="text" id="name" placeholder="이름" required aria-invalid="false" aria-describedby="name_error">
</label>
<div class="error" id="name_error" role="alert" aria-atomic="true" aria-live="assertive" style="display:block;">필수 정보입니다.</div>

<div class="frmbox input_txt">
	<input type="text" id="name2" placeholder="이름" aria-invalid="false" aria-describedby="name2_error" onblur="checkName(event)">
</div>
<div class="error" id="name2_error" role="alert" aria-atomic="true" aria-live="assertive"></div>
		

<div class="frmbox input_txt">
	<input type="text" class="non-kr email" id="email" placeholder="예) buppagistar@gmail.com" aria-required="true" aria-invalid="true" aria-describedby="email_error" onblur="CheckEmail(event)">
</div>
<div class="error" id="email_error" role="alert" aria-atomic="true" aria-live="assertive"></div>

<div class="frmbox input_txt">
	<input type="text" class="non-kr" id="birth" placeholder="예) 20191231" maxlength="8" aria-invalid="false" aria-describedby="birth_error" onkeyup="CheckNumber(event)" onblur="CheckDate(event, false)">
	<div class="error" id="birth_error" role="alert"></div>
</div>

이메일과 생년월일에는 한글이 들어갈 필요가 없어서 아래 소스를 추가로 넣었습니다.

$('input[type=text].non-kr').on('blur keyup', function(){
	var $this = $(this);
	var regexp = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g;
	var v = $this.val();
	if (regexp.test(v)) {
		$this.val(v.replace(regexp, ''));
	} else if(!$this.hasClass('email')) {
		$this.val( $this.val().toUpperCase() );
	}
});

Github(다운로드)

혹시 문제점이 있으면 피드백 주시면 소스는 수정하겠습니다.