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 로 간단하게 검색해서 사용할 수 있다고 해도,
이렇게 자주 사용하는 유효성 체크를 정리해두면 바로 바로 복붙해서 사용하는게 훨씬 편하기 때문에 올려봅니다.
'Javscript' 카테고리의 다른 글
| Obejct 를 다루는 함수들 (0) | 2023.09.13 |
|---|---|
| 문자열을 다루는 slice, split, substring (0) | 2023.09.09 |
| 배열을 다루는 forEach, map, filter (0) | 2023.09.08 |
