프로젝트가 바뀔때 마다 유효성 검사 코드를 매번 외우고 있는 것이 아니라서
기존에 작성했던 코드를 찾게 되는일이 발생하여 포스팅으로 백업해 두려고 함
예제 코드에만 jQuery 를 사용하고 실제 코드는 일반 스크립트를 사용하며
각 메소드에 매개변수를 enum 값을 받지 않도록 수정해여 사용하는 것도 방법이다.
예제는 HS란 객체로 구현함
- jsFiddle 의 html 영역에 코드를 넣고 테스트 가능합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
/* Enum 정의 */
const RegexPattern = {
NUM: 0, // 숫자만
NUMENG: 1, // 숫자와 영어만
NUMKOR: 2, // 숫자와 한글만
CHAR: 3, // 문자열 영어+한글만
KOR: 4, // 한글만
ENG: 5, // 영어만
HPNUM: 6, // 핸드폰번호 또는 하이픈포함 핸드폰번호
HPNUM2: 7, // 핸드폰번호 하이픈포함 만
HPNUM3: 8, // 핸드폰번호 하이픈제외 만
EMAIL: 9, // 이메일형식
URL: 10, // URL 주소형태만
REQ: 11 // 문자열형태로 값이 존재할때만
};
/* HS 객체로 묶음 */
let HS = {
/**
* 유효성 검사
* @param {number} patternNumber RegexPattern.key 에 매핑되는 번호
* @param {string} value 유효성 검사 진행할 값 문자열
* @retruns {boolen} 성공이면 true 실패면 false
*/
isRegexCheck: function(patternNumber, value) {
// RegexPattern 의 Value 가 '1' 과 같은 문자열로 들어오기에 형변환을 해 주어야 한다
let patternNumberNum = parseInt(patternNumber);
switch (patternNumberNum) {
case 0:
return /^\d*$/.test(value);
case 1:
return /^[a-zA-Z0-9]*$/.test(value);
case 2:
return /^[ㄱ-ㅎ가-힣0-9*]+$/.test(value);
case 3:
return /^[a-zA-Zㄱ-ㅎㅏ-ㅣ가-힣]*$/.test(value);
case 4:
return /^[ㄱ-ㅎㅏ-ㅣ가-힣]*$/.test(value);
case 5:
return /^[a-zA-Z]+$/.test(value);
case 6:
return /^(010|011|016|017|018)\d{3,4}\d{4}$/.test(value) ||
/^(010|011|016|017|018)-\d{3,4}-\d{4}$/.test(value);
case 7:
return /^(010|011|016|017|018)-\d{3,4}-\d{4}$/.test(value);
case 8:
return /^(010|011|016|017|018)\d{3,4}\d{4}$/.test(value);
case 9:
return /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/.test(value);
case 10:
return /^(https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)$/.test(value);
case 11:
return value.trim() !== '';
default:
return false;
}
},
/**
* 버튼 클릭 시 진행되는 유효성 검사
* @param {number} patternNumber RegexPattern.key 에 매핑되는 번호
* @param {string} testValue 유효성 검사 진행할 값 문자열
*/
regexTest: function(patternNumber, testValue) {
if (testValue != '') {
if (HS.isRegexCheck(patternNumber, testValue)) {
alert('정규식 패턴 검증에 성공 하였습니다.');
}
else {
alert('검증에 실패 하였습니다.');
}
}
else {
alert('값을 입력하세요');
}
},
/* 키 에서 값 추출하기 (사용안함) */
getRegexPatternKey: function(keyString) {
return Object.keys(RegexPattern).find(key => RegexPattern[key] === keyString);
}
};
// 예제를 위한 실행 코드
$(function() {
// <select> 에 enum 채우기
let html = '';
for(const [key,value] of Object.entries(RegexPattern)) {
let keyText = 'RegexPattern.' + key;
html += '<option value="'+ value +'">' + keyText + '</option>';
}
$('#regexPatten').html(html);
// 검사 버튼 클릭
$('#btnCheck').on('click', () => {
HS.regexTest( $('#regexPatten').val(), $.trim($('#testValue').val()) );
});
});
</script>
</head>
<body>
<div class="container">
<pre>유효성 검사 테스트</pre>
<div class="row mt-3 col-6">
<div class="col">
<select id="regexPatten" class="form-select" ></select>
</div>
<div class="col">
<input id="testValue" type="text" class="form-control" />
</div>
<div class="col">
<button id="btnCheck" type="button" class="btn btn-success" >검사</button>
</div>
</div>
</div>
</body>
</html>'Web > JS & jQuery' 카테고리의 다른 글
| JS와 jQuery 를 사용한 모듈화 (0) | 2024.09.26 |
|---|---|
| jQuery-Confirm 플러그인 (1) | 2024.09.01 |
| String.Format, String.IsNullOrEmpty, String.IsNullOrWhiteSpace (0) | 2024.08.30 |
| FAKE Ajax JSON 데이터가 필요할 때 jsonplaceholder (0) | 2024.08.30 |
| JavaScript 에서 StringBuilder 를 사용해 보자 (0) | 2024.08.29 |