javascript로 개발할때 자주 사용하는 유효성 체크 5가지

1. 빈값 체크 하기 (Null, Undefined)

form 작성할때 필수값 체크할때 무조건 필요해요. 단순히 value가 비어있을때 체크해도 되지만 확실하게 null값, undefined 값을 같이 비교해주면 완벽하게 비교할 수 있습니다.

function isEmpty(value) {
    return value === null || value === undefined || value === '';
}

// 사용 예시
console.log(isEmpty(null));  // true
console.log(isEmpty(''));    // true
console.log(isEmpty(0));     // false
console.log(isEmpty([]));    // false

 

 

2. 숫자인지 체크 

보통 input에 number 로 타입을 지정하면 대부분 체크가 되긴하지만 "e" 입력했을때 입력되는거 아시나요? ㅎㅎ 1e+6 이라고 입력했을때 수학적인 측면에서 1000000 을 뜻하기 때문에 e는 숫자체크를 해도 입력이됩니다. 이를 온전히 차단하고자 유효성 체크를 해주면 좋습니다.

function isNumeric(value) {
    return !isNaN(value) && typeof value === 'number';
}

// 사용 예시
console.log(isNumeric(123));    // true
console.log(isNumeric('123'));  // false
console.log(isNumeric(NaN));    // false
console.log(isNumeric(3.14));   // true

 

 

3. 이메일 타입 체크 

이 또한 input의 타입을 email로 체크해주면 웬만하면 체크해주긴 합니다만, 간혹 스크립트로 체크해야할 때가 있습니다. 

주로 정규식을 사용해서 체크합니다.

function isValidEmail(email) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
}

// 사용 예시
console.log(isValidEmail('test@example.com'));  // true
console.log(isValidEmail('test@.com'));         // false
console.log(isValidEmail('test@example'));      // false

 

4. 전화번호 타입 체크 

한국에서 많이 사용하는 전화번호 체크입니다. 나라마다 번화번호 수가 다르니 한국한해서 사용 가능하지만, 진짜 많이 사용하는 유효성 체크 문법입니다. 역시 유효성 체크로 간단하게 할 수 있습니다.

function isValidPhoneNumber(phone) {
    const phoneRegex = /^01[016789]-\d{3,4}-\d{4}$/;
    return phoneRegex.test(phone);
}

// 사용 예시
console.log(isValidPhoneNumber('010-1234-5678'));  // true
console.log(isValidPhoneNumber('02-1234-5678'));   // false
console.log(isValidPhoneNumber('01012345678'));    // false

 

5. 한국 원화 타입 함수 

이건 유효성이라기 보다는 타입 변환이라고 보는게 더 맞겠네요. 그런데 이것도 진짜 많이 씁니다. 매번 귀찮게 찾아서 썼는데 이번기회에 저장해 놓고 걍 복붙해서 쓰려고요. 간단하게 만약 10000 일때 10,000 이렇게 표시해 주도록 해주는 겁니다.

function formatCurrencyKRW(amount) {
    let num = Number(amount); // "10000"일때 10000 로 변환
    if (isNaN(num)) { // 만약 "참새"같은 글자인 경우에는 return 
        return 'Invalid number';
    }
    return num.toLocaleString('ko-KR') + ' 원';
}

// 사용 예시
console.log(formatCurrencyKRW(1000000));    // "1,000,000 원"
console.log(formatCurrencyKRW('123456789'));// "123,456,789 원"
console.log(formatCurrencyKRW('10000'));    // "10,000 원"
console.log(formatCurrencyKRW('abc'));      // "Invalid number"
console.log(formatCurrencyKRW(NaN));        // "Invalid number"

 

 

아무리 AI 로 간단하게 검색해서 사용할 수 있다고 해도,

이렇게 자주 사용하는 유효성 체크를 정리해두면 바로 바로 복붙해서 사용하는게 훨씬 편하기 때문에 올려봅니다.