[ JavaScript ] 입력에 대한 처리 및 문자열 검사
2024. 5. 7. 23:14ㆍ· FRONT-END/└ JS
환경 : Visual Studio Code
[ 주요 코드 ]
<script type="text/javascript">
function checkText(){
var inputTarget = document.querySelector(".temp");
var text = inputTarget.value;
//console.log(text);
//console.log(text.length);//자바스크립트는 문자열을 문자 배열로 본다
var lengthTarget = document.querySelector(".result1");
lengthTarget.textContent = text.length;
//출생년도 형식인지를 검사(4자리 숫자)
// - JS에서는 정규표현식 객체를 슬래시로 감싸서 생성
var regex = /^[0-9]{4}$/;
var isValid = regex.test(text);
//console.log(isValid);
var regexTarget = document.querySelector(".result2");
if(isValid) {
regexTarget.textContent = "오예!";
}
else {
regexTarget.textContent = "잘못된 연도 형식입니다";
}
}
</script>(+) .length를 활용하여 길이를 출력한다
(+) 정규표현식에서는 객체를 슬래시(/)로 감싸서 생성한다
(+) 정규표현식과 일치하는지 테스트는 test() 메소드를 사용한다.
[ 전체 코드 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript 예제</title>
<!-- 구글 폰트 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
<!-- 내가 구현할 스타일 -->
<link rel="stylesheet" type="text/css" href="../css/commons.css">
<link rel="stylesheet" type="text/css" href="../css/test.css">
<!-- font awesome 아이콘 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
</style>
<!-- javascript를 의도적으로 head 자리에 배치해서 가장 먼저 실행되도록 구현 -->
<script type="text/javascript">
function checkText(){
var inputTarget = document.querySelector(".temp");
var text = inputTarget.value;
//console.log(text);
//console.log(text.length);//자바스크립트는 문자열을 문자 배열로 본다
var lengthTarget = document.querySelector(".result1");
lengthTarget.textContent = text.length;
//출생년도 형식인지를 검사(4자리 숫자)
// - JS에서는 정규표현식 객체를 슬래시로 감싸서 생성
var regex = /^[0-9]{4}$/;
var isValid = regex.test(text);
//console.log(isValid);
var regexTarget = document.querySelector(".result2");
if(isValid) {
regexTarget.textContent = "오예!";
}
else {
regexTarget.textContent = "잘못된 연도 형식입니다";
}
}
</script>
</head>
<body>
<div class="container w-500">
<div class="cell center">
<h1>입력 이벤트</h1>
</div>
<div class="cell">
<input type="text" class="temp tool w-100" oninput="checkText();">
</div>
<div class="cell result1"></div>
<div class="cell result2"></div>
</div>
</body>
</html>
개인 공부 기록용입니다:)
728x90
'· FRONT-END > └ JS' 카테고리의 다른 글
| [ JavaScript ] 회원가입 창 (일부) 만들기, 비밀번호 확인에 대한 심화 공부! (0) | 2024.05.10 |
|---|---|
| [ JavaScript ] 1000자까지만 입력되도록 막아보기 (0) | 2024.05.09 |
| [ JavaScript ] 버튼을 눌러 이미지의 크기 조절 (0) | 2024.05.05 |
| [ JavaScript ] 스크립트에서 폰트 조절하기 (0) | 2024.05.05 |
| [ JavaScript ] style 제어하기 (0) | 2024.05.04 |