Javscript

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

노야근 2025. 2. 23. 00:09
반응형

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 로 간단하게 검색해서 사용할 수 있다고 해도,

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

반응형