코딩 노트
Javascript02 - 정규표현식 본문
전시간 리뷰
html과 css로 만들어진 구조에 백엔드와 효율적으로 소통하기 위한 언어가 Javascript 언어이다,
1차적으로 이벤트 처리 방법을 배우는 것이라 봐도 좋다.
1, <script>라는 태그로 둘러쌓인 언어가 필요하다.
2. 자바와 유사하지만 차이점이 있다. (조건이나 문법은 거의 동일)
3. 함수는 반환형이나 접근제한 없이 적는다.
(이 함수를 html에서 특정상황에 부르게 처리, 이벤트의 종류에 따라 함수 호출 가능)
4. 태그를 가져온다가 아닌 태그를 제어하는 리모콘이 생겼다라고 보는 게 좋다.
5. 함수로 속성과 스타일, 클래스를 바꿀 수 있다.
정규표현식으로 아이디, 비밀번호 형식 검사하는 3가지 형태
11.join.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
<!-- 구글 웹 폰트를 사용을 위한 CDN -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- 내가 만든 CSS 파일을 불러오는 코드 -->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
</style>
<!-- Javascript 작성 공간 -->
<script>
function checkId () {
var input = document.querySelector("[name=memberId]"); //name을 불러오겠다, & 입력창 가져와라
// var div = document.querySelector("[name=memberId] + div"); //css selector (html), +는 뒤에라는 뜻
var div = input.nextElementSibling; //javascript & (메세지(div) 가져와라)
var idRegex = /^[a-z0-9]{5,20}$/; //정규표현식
var isValid = idRegex.test(input.value); //검사해서 찍어라
if ( isValid ) {
div.style.color = "#00b894";
div.textContent = "멋진 아이디입니다!";
}
else {
div.style.color = "#d63031";
div.textContent = "영문과 숫자 5~20자로 작성하세요.";
}
}
function checkPw () {
var input = document.querySelector("[name=memberPw]"); //name을 불러오겠다, & 입력창 가져와라
// var div = document.querySelector("[name=memberPw] + div"); //css selector (html), +는 뒤에라는 뜻
var div = input.nextElementSibling; //javascript & (메세지(div) 가져와라)
var pwRegex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$])[A-Za-z0-9!@#$]{8,16}$/; //정규표현식
var isValid = pwRegex.test(input.value); //정규표현식으로 입력값을 검사하겠다
if ( isValid ) {
div.style.color = "#00b894";
div.textContent = "올바른 비밀번호 형식입니다.";
}
else {
div.style.color = "#d63031";
div.textContent = "비밀번호는 영문 대소문자, 숫자, 특수문자를 반드시 포함한 8~16자입니다.";
}
}
function checkPw2() {
//비밀번호 입력창, 비밀번호 확인 입력창, 알림텍스트 총 세 개의 태그를 불러와야함
var pw = document.querySelector("[name=memberPw]"); //비밀번호 입력창 불러오기
var pwCheck = document.querySelector("#password-check"); //비밀번호확인 입력창 불러오기
//(name이 없는 이유는 DB에전송할 필요가 없기 때문)
var div = pwCheck.nextElementSibling; //텍스트 불러오기
//비밀번호가 1글자 이상 입력되어 있고 두 입력값이 같으면
var isValid = pw.value.length >= 1 && pw.value == pwCheck.value;
if(pw.value.length == 0){
div.style.color = "#d63031";
div.textContent = "비밀번호를 먼저 작성하세요.";
}
if ( isValid ) {
div.style.color = "#00b894";
div.textContent = "비밀번호가 일치합니다..";
}
else {
div.style.color = "#d63031";
div.textContent = "비밀번호가 일치하지 않습니다.";
}
}
</script>
</head>
<body>
<div class = "container w-400">
<div class="row">
<h1>회원가입</h1>
</div>
<div class="row left">
<label>아이디</label>
<input type="text" class="form-input w-100" name="memberId" oninput="checkId();">
<div></div>
</div>
<div class="row left">
<label>비밀번호</label>
<input type="password" class="form-input w-100" name="memberPw" oninput="checkPw();">
<div></div>
</div>
<div class="row left">
<label>비밀번호 확인</label>
<input type="password" class="form-input w-100" id="password-check" oninput="checkPw2();">
<div></div>
</div>
</div>
</body>
</html>
태그.classList.add() : 클래스 추가
태그.classList.remove() : 클래스 삭제
11-1.join.html
스타일을 css 형태로 지정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입1</title>
<!-- 구글 웹 폰트를 사용을 위한 CDN -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- 내가 만든 CSS 파일을 불러오는 코드 -->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
/*
성공/실패에 대한 스타일 구현
*/
.success {
color: #00b894;
}
.fail {
color: #d63031;
}
</style>
<!-- Javascript 작성 공간 -->
<script>
function checkId () {
var input = document.querySelector("[name=memberId]"); //name을 불러오겠다, & 입력창 가져와라
// var div = document.querySelector("[name=memberId] + div"); //css selector (html), +는 뒤에라는 뜻
var div = input.nextElementSibling; //javascript & (메세지(div) 가져와라)
var idRegex = /^[a-z0-9]{5,20}$/; //정규표현식
var isValid = idRegex.test(input.value); //검사해서 찍어라
div.classList.remove("success", "fail"); //div의 클래스 중에서 두 개를 지워
if ( isValid ) {
// div.style.color = "#00b894";
div.classList.add("success"); //클래스 추가
div.textContent = "멋진 아이디입니다!";
}
else {
// div.style.color = "#d63031";
div.classList.add("fail"); //클래스 추가
div.textContent = "영문과 숫자 5~20자로 작성하세요.";
}
}
function checkPw () {
var input = document.querySelector("[name=memberPw]"); //name을 불러오겠다, & 입력창 가져와라
// var div = document.querySelector("[name=memberPw] + div"); //css selector (html), +는 뒤에라는 뜻
var div = input.nextElementSibling; //javascript & (메세지(div) 가져와라)
var pwRegex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$])[A-Za-z0-9!@#$]{8,16}$/; //정규표현식
var isValid = pwRegex.test(input.value); //정규표현식으로 입력값을 검사하겠다
div.classList.remove("success", "fail"); //div의 클래스 중에서 두 개를 지워
if ( isValid ) {
// div.style.color = "#00b894";
div.classList.add("success"); //클래스 추가
div.textContent = "올바른 비밀번호 형식입니다.";
}
else {
// div.style.color = "#d63031";
div.classList.add("fail"); //클래스 추가
div.textContent = "비밀번호는 영문 대소문자, 숫자, 특수문자를 반드시 포함한 8~16자입니다.";
}
}
function checkPw2() {
//비밀번호 입력창, 비밀번호 확인 입력창, 알림텍스트 총 세 개의 태그를 불러와야함
var pw = document.querySelector("[name=memberPw]"); //비밀번호 입력창 불러오기
var pwCheck = document.querySelector("#password-check"); //비밀번호확인 입력창 불러오기
//(name이 없는 이유는 DB에전송할 필요가 없기 때문)
var div = pwCheck.nextElementSibling; //텍스트 불러오기
//비밀번호가 1글자 이상 입력되어 있고 두 입력값이 같으면
var isValid = pw.value.length >= 1 && pw.value == pwCheck.value;
div.classList.remove("success", "fail"); //div의 클래스 중에서 두 개를 지워
if(pw.value.length == 0){
// div.style.color = "#d63031";
div.classList.add("fail"); //클래스 추가
div.textContent = "비밀번호를 먼저 작성하세요.";
}
if ( isValid ) {
// div.style.color = "#00b894";
div.classList.add("success"); //클래스 추가
div.textContent = "비밀번호가 일치합니다..";
}
else {
// div.style.color = "#d63031";
div.classList.add("fail"); //클래스 추가
div.textContent = "비밀번호가 일치하지 않습니다.";
}
}
</script>
</head>
<body>
<div class = "container w-400">
<div class="row">
<h1>회원가입</h1>
</div>
<div class="row left">
<label>아이디</label>
<input type="text" class="form-input w-100" name="memberId" oninput="checkId();">
<div></div>
</div>
<div class="row left">
<label>비밀번호</label>
<input type="password" class="form-input w-100" name="memberPw" oninput="checkPw();">
<div></div>
</div>
<div class="row left">
<label>비밀번호 확인</label>
<input type="password" class="form-input w-100" id="password-check" oninput="checkPw2();">
<div></div>
</div>
</div>
</body>
</html>
11-2.join.html
자바스크립트의 목표 코드 형태
!important는 우선순위를 최상위로 올린다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입2</title>
<!-- 구글 웹 폰트를 사용을 위한 CDN -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- 내가 만든 CSS 파일을 불러오는 코드 -->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
/*
성공/실패에 대한 스타일 구현
*/
.success-feedback {
color: #00b894;
display: none;
}
.fail-feedback,
.fail2-feedback {
color: #d63031;
display: none;
}
.success ~ .success-feedback { /* success 뒤에 있는 success-feedback */
display: block;
}
.fail ~ .fail-feedback {
display: block;
}
.fail2 ~ .fail2-feedback {
display: block;
}
.success {
/* !important 우선순위를 최상위로 올린다. */
border-color: #00b894 !important;
background-image: url("./images/valid.png");
background-repeat: no-repeat;
background-position-x: right;
background-position-y: center;
background-size: 1em;
}
.fail,
.fail2 {
border-color: #d63031 !important;
background-image: url("./images/invalid.png");
background-repeat: no-repeat;
background-position-x: right;
background-position-y: center;
background-size: 1em;
}
</style>
<!-- Javascript 작성 공간 -->
<script>
function checkId () {
var input = document.querySelector("[name=memberId]"); //name을 불러오겠다, & 입력창 가져와라
var idRegex = /^[a-z0-9]{5,20}$/; //정규표현식
var isValid = idRegex.test(input.value); //검사해서 찍어라
input.classList.remove("success", "fail"); //div의 클래스 중에서 두 개를 지워
if ( isValid ) {
// div.style.color = "#00b894";
input.classList.add("success"); //클래스 추가
}
else {
// div.style.color = "#d63031";
input.classList.add("fail"); //클래스 추가
}
}
function checkPw () {
var input = document.querySelector("[name=memberPw]"); //name을 불러오겠다, & 입력창 가져와라
var pwRegex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$])[A-Za-z0-9!@#$]{8,16}$/; //정규표현식
var isValid = pwRegex.test(input.value); //정규표현식으로 입력값을 검사하겠다
input.classList.remove("success", "fail"); //div의 클래스 중에서 두 개를 지워
input.classList.add(isValid ? "success" : "fail"); //if문을 삼항 연산자로 줄이기
}
function checkPw2() {
var pw = document.querySelector("[name=memberPw]"); //비밀번호 입력창 불러오기
var pwCheck = document.querySelector("#password-check"); //비밀번호확인 입력창 불러오기
//비밀번호가 1글자 이상 입력되어 있고 두 입력값이 같으면
var isValid = pw.value.length >= 1 && pw.value == pwCheck.value;
pwCheck.classList.remove("success", "fail", "fail2");
if(pw.value.length == 0){
pwCheck.classList.add("fail2"); //클래스 추가
}
else if ( isValid ) {
pwCheck.classList.add("success"); //클래스 추가
}
else {
pwCheck.classList.add("fail"); //클래스 추가
}
}
</script>
</head>
<body>
<div class = "container w-400">
<div class="row">
<h1>회원가입</h1>
</div>
<div class="row left">
<label>아이디</label>
<input type="text" class="form-input w-100" name="memberId" oninput="checkId();">
<div class="success-feedback">멋진 아이디입니다!</div>
<div class="fail-feedback">영문과 숫자 5~20자로 작성하세요.</div>
</div>
<div class="row left">
<label>비밀번호</label>
<input type="password" class="form-input w-100" name="memberPw" oninput="checkPw();">
<div class="success-feedback">올바른 비밀번호 형식입니다!</div>
<div class="fail-feedback">비밀번호는 영문, 숫자, 특수문자를 반드시 포함하여 8~16자로 작성하세요.</div>
</div>
<div class="row left">
<label>비밀번호 확인</label>
<input type="password" class="form-input w-100" id="password-check" oninput="checkPw2();">
<div class="success-feedback">비밀번호가 일치합니다.</div>
<div class="fail-feedback">비밀번호가 일치하지 않습니다.</div>
<div class="fail2-feedback">비밀번호를 먼저 작성하세요.</div>
</div>
</div>
</body>
</html>
onclick = "return false"
스프링에 인터셉터와 비슷하다.
기본 이벤트가 있는 태그는 앞에 return을 붙여서 함수를 처리한다.
form에서 전송되는 이벤트를 onsubmit이라고 한다.
12.default.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기본 이벤트 제어</title>
<!-- 구글 웹 폰트를 사용을 위한 CDN -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- 내가 만든 CSS 파일을 불러오는 코드 -->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
</style>
<!-- Javascript 작성 공간 -->
<script>
//자바스크립트는 자료형 구분을 안 하기 때문에 반환형이 필요 없다.
// return true; //허용
// return false; //차단
function checkMove() { //아무말 안 하면 기본적으로 허용
//확인창
var choice = confirm("정말 이동할 거예요?");
// console.log(choice); 확인은 true, 취소는 false가 나옴
if (choice == false) {
return false;
}
return true;
}
function checkForm() {
var input = document.querySelector("[name=keyword]");
//(블랙리스트 코드: 기본적으로 컨셉이 통과지만 차단할 사람을 알려줌)
// if(input에 입력값이 없다면) {
// if(input.value.length == 0) { //입력 글자수가 0이라면 (권장)
// if(input.value == "") { //입력값이 공백이라면
// if( input.value == false ){ //입력값이 부정적인 값이라면
if(!input.value) {
alert("값을 입력하세요!"); //alert써도 안 나오는 브라우저가 있을 수 있음, 요즘은 modal(오버레이 형태)로 띄움
return false; //내가 원치 않는 상황
}
return true; //내가 원하는 작업
}
</script>
</head>
<body>
<div class="container w-500">
<div class="row">
<h1>기본 이벤트 제어</h1>
</div>
<div class="row left">
기본 이벤트란 태그 자체에 내장된 이벤트를 말한다. <br>
a, form 등이 있다
</div>
<div class="row left">
</div>
<div class="row left">
</div>
<div class="row left">
<a href="https://www.google.com" onclick="return checkMove();">구글로 이동(선택)</a> <!-- return을 꼭 적어야함 -->
</div>
<div class="row left">
<input type = "text" name="keyword" class="form-input w-100">
</div>
<div class="row">
<button type="submit" class="btn btn-positive w-100">전송</button>
</div>
</form>
</div>
</body>
</html>
onfocus : 이 태그를 선택했을 때
onblur : 이 태그를 떠났을 때
13.form.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>form</title>
<!-- 구글 웹 폰트를 사용을 위한 CDN -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- 내가 만든 CSS 파일을 불러오는 코드 -->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
</style>
<!-- Javascript 작성 공간 -->
<script>
function checkMemberId() {
var input = document.querySelector("[name=memberId]") //속성(attribute) 선택자
var regex = /^[a-z0-9]{5,20}$/;
input.classList.remove("success", "fail");
if(regex.test(input.value)){
input.classList.add("success");
return true; //결과를 알려주는 코드 추가
}
else {
input.classList.add("fail");
return false;
}
}
function checkMemberPw() {
var input = document.querySelector("[name=memberPw]");
var regex = /^[A-Za-z0-9!@#$]{8,16}$/;
input.classList.remove("success", "fail");
if(regex.test(input.value)) {
input.classList.add("success");
return true;
}
else {
input.classList.add("fail");
return false;
}
}
//form 검사는 기존 검사 함수를 불러 결과를 받아 반환하도록 구현
function checkForm() {
// return checkMemberId() && checkMemberPw();
// &&연산자는 앞에 거가 false면 뒤에 거 실행을 안 시킴
//둘 다 한 번에 실행 시키고 싶을 때
var result1 = checkMemberId();
var result2 = checkMemberPw();
return result1 && result2;
}
</script>
</head>
<body>
<div class="container w-500">
<div class="row">
<h1>사용자 등록</h1>
</div>
<form autocomplete="off" onsubmit="return checkForm();">
<div class="row left">
<label>아이디</label>
<input name="memberId" placeholder="영문, 숫자 5~20자" class="form-input w-100"
onblur="checkMemberId();">
<div class="success-feedback">멋진 아이디입니다!</div>
<div class="fail-feedback">아이디가 형식에 맞지 않아요...</div>
</div>
<div class="row left">
<label>비밀번호</label>
<input name="memberPw" placeholder="영문, 숫자, 특수문자 포함 8~16자" class="form-input w-100"
onblur="checkMemberPw();">
<div class="success-feedback">올바른 비밀번호 형식입니다!</div>
<div class="fail-feedback">잘못된 비밀번호 형식이에요...</div>
</div>
<div class="row">
<button type="submit" class="btn btn-positive w-100">
<i class="fa-solid fa-plus"></i>
등록하기
</button>
</div>
</form>
</div>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| Javascript03 - 회원가입 검사 코드, 체크박스 (0) | 2023.09.04 |
|---|---|
| Javascript02 - 게시글 작성 (0) | 2023.09.01 |
| Javascript01 - 시작 (0) | 2023.08.31 |
| 04 객체 (0) | 2022.11.15 |
| 02 자바스크립트 기초 문법 (0) | 2022.11.08 |
'JavaScript' Related Articles
more
