[JavaScript]정규표현식 유효성 검사(Validation) 만들기

유효성 검사란

 

사용자가 입력한 데이터가 특정 기준이나 규칙에 부합하는지 확인하는 과정입니다.

 

목적

데이터 형식 확인: 사용자가 올바른 형식(예: 이메일, 전화번호)으로 데이터를 입력했는지 확인합니다.

데이터 길이 검증: 입력된 데이터가 정해진 길이 요건을 충족하는지 확인합니다(예: 최소 및 최대 문자 수).

보안 강화: 특정 패턴(예: 비밀번호의 복잡성 요건)을 강제함으로써 보안성을 향상시킵니다.

데이터 무결성 유지: 데이터베이스에 저장되기 전에 입력 데이터의 정확성을 보장합니다.

사용자 경험 개선: 잘못된 데이터 입력을 사전에 방지하고, 사용자에게 적절한 피드백을 제공하여 사용자 경험을 개선합니다.

 

예제

<script>
    if(!/^[a-zA-Z0-9]{3,20}$/.test(userId)) {
		errorMessage = 'ID는 3~20자의 영문자과 숫자여야 합니다.';
	}
	
    if(!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&])[A-Za-z\d!@#$%^&]{10,30}$/.test(password)) {
		errorMessage = '비밀번호는 10~30자의 대소문자, 숫자, 특수문자(!@#$%^&)를 포함해야 합니다.';
	}

	if(!/^([가-힣]{2,10}|[A-Za-z]{4,20})$/.test(name)) {
		errorMessage = '이름은 2~10자의 한글 또는 4~20자의 영어여야 합니다.';
	}
	
    if(!/^(\d{1,3}-\d{1,4}-\d{4})$/.test(phoneNumber) && !/^(\d{10,11})$/.test(phoneNumber)) {
		errorMessage = '전화번호는 "-"를 포함하여 12~13자리 또는 "-"를 제외한 10~11자리여야 합니다.';
	}
	
    if(address.length < 5 || address.length > 100) {
		errorMessage = '주소는 5~100자 사이여야 합니다.';
	}
	if(!/^.+@(?:.+\.com|.+\.org|.+\.co\.kr|.+\.net)$/.test(email)) {
		errorMessage = '이메일은 "@"를 포함해야 하며, .com, .org, .co.kr, .net 으로 종료되어야 합니다.';
	}
	if(gitAddress && !gitAddress.startsWith('https://github.com/')) {
		document.forms["registrationForm"]["gitAddress"].value = 'https://github.com/' + gitAddress;
	}
</script>

 

프론트엔드에서 유효성 검사를 처리하는 예시이며, 변형된 데이터입력을 막기위에서 백엔드에서도 예외처리를 진행해야합니다.