사용자로부터 값을 입력받는다면 일차적으로 화면, 즉 JavaScript로 유효성 검사를 해야 합니다. 그리고 그 중 날짜 혹은 시간과 같은 것은 어떤 프로젝트를 하건 필수적으로 입력받는 경우가 많은 거 같습니다. 따라서 정리해놓는다면 여러모로 도움이 될 것 같아 이 글을 작성합니다. 작성한 코드는 계속 수정, 보완해나갈 예정이고, 틀린 부분이나 의견이 있으시면 댓글 남겨주세요.
_____
/**
* 유효한 날짜 형식인지 validation check(ddMMyyyy)
* 만약 유효하지 않다면 false 반환
*
* @author hj
*/
function checkDateFormat(dateString) {
var date;
if (dataString.length === 0) {
return true;
} else if (dateString.length !== 8) {
return false;
}
date = new Date(dateString.substr(4, 4), dateString.substr(2, 2) - 1, dateString.substr(0, 2));
console.log(`rtrn : ${date && date.getMonth() === parseInt(dateString.substr(2, 2), 10) - 1}`);
return (date && date.getMonth() === parseInt(dateString.substr(2, 2), 10) - 1); // [1]
}
/**
* 유효한 시간 형식인지 validation check(HHmm)
* 만약 유효하지 않다면 false 반환
*
* @author hj
*/
function checkTimeFormat(timeString) {
var timeReg = /^(([0-1][0-9])|(2[0-3]))[0-5][0-9]$/;
if (timeString.length === 0) {
return true;
}
return timeReg.test(timeString); // [2]
}
_____
1. 다음 글의 7번 short circuit conditionals와 다음 글의 2번 use '!!' operator to convert to boolean을 참고한다. 즉 date가 null이 아니라면 해당 월을 비교해 유효성을 검사하는 것이다.
2. 만약 입력 문자열이 정규식과 맞는지를 테스트하기 위한 목적이 전부라면, RegExp.test가 가장 적합하다. 한편 RegExp.exec는 입력 문자열에서 일치 탐색을 수행한 결과를 배열 혹은 null로 반환한다.
// RegExp.prototype.test()
const str = 'table football';
const regex = new RegExp('foo*');
console.log(regex.test(str)); // expected output: true
// RegExp.prototype.exec()
const regex1 = RegExp('foo*', 'g');
const str1 = 'table football, foosball';
let array1;
while ((array1 = regex1.exec(str1)) !== null) {
console.log(`Found ${array1[0]}. Next starts at ${regex1.lastIndex}.`);
}
// expected output: "Found foo. Next starts at 9."
// expected output: "Found foo. Next starts at 19."
_____
참고자료
- JavaScript Form Validation - Date
- How to validate date with format 'mm/dd/yyyy' in JavasScript?
- time validation using regex and javascript
- Difference between test() and exec() methods in JavaScript
- RegExp.prototype.test()
- RegExp.prototype.exec()
'공부 > JavaScript' 카테고리의 다른 글
클로저 (0) | 2021.07.24 |
---|---|
배열 API (0) | 2021.07.19 |
JSON (0) | 2021.01.31 |
번역] 11가지 까다로운 자바스크립트 질문 (0) | 2021.01.23 |
기타 (0) | 2021.01.03 |
댓글