JavaScript 입문과 웹 UI개발(14)-정규식으로 이메일형식 검증해보기
2022. 10. 3. 10:10ㆍ애플코딩 javascript 강의
반응형
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<!--부트스트랩 css-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
crossorigin="anonymous">
<!--내가 만든 css 파일-->
<link href="main.css" rel="stylesheet">
<!--제이쿼리-->
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"></script>
</head>
<body>
<div class=""main-bg">
<h4>Shirts on Sale</h4>
<button id="login" class="btn btn-danger">로그인</button>
</div>
<div class="black-bg">
<div class="white-bg">
<h4>로그인하세요</h4>
<!-- 모달창 안에 form 태그를 만들건데 예쁘게
bootstrap에서 가져다가 쓸수도 있음
-->
<form action="success.html">
<div class="my-3">
<input type="text" class="form-control">
</div>
<div class="my-3">
<input type="password" class="form-control">
</div>
<button type="submit" id="gogo" class="btn btn-primary">전송</button>
<button type="button" class="btn btn-danger" id="close">닫기</button>
</form>
</div>
</div>
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
<script>
// '문자열'.includes('포함하는지 물어볼 문자') => 있으면 true
/*
정규 표현식(regular expression)
'abcc'.includes('bc')
true
한글이 들어있냐 영어가 들어있냐, 숫자가 1회 출현하냐, A로 끝나냐 이런건 못함
정규식 쓰면 문자검사 가능
/abc/.test('abcdd')
true
위에가 정규식인데 정규식의 장점은
영어가 들어있는지 알려줄수있다
/[a-z]/.test('aadfd')
true
한글이 들어있는지 알려줄수있다
/[ㄱ-ㅎ, ㅏ-ㅣ]/.test('fdf')
false
숫자가 들어갔는지 알려줄수있다
/[0-9]/.test('dd1232')
true
문자가 하나라도 있으면 true 나타내는 축약어
/\S/.test('1232222123')
true
a로 시작하면 true
/^a/.test('afndfk')
true
a로 끝나면 true
/a$/.test('fdfdfda')
true
or 연산자를 이용해 두가의 문자가 있는지 알아내는것
/(a|b)/.test('bb')
true
이메일 형식에 맞는지 알아내는 것
+기호를 써줘야 한다. 왜냐하면 \S는 한글자만 나타내니 +가 없으면 한글자@한글자.한글자 여야 true이다
.은 특별한 정규식 문법으로 앞에 \를 붙여줘야 한다
/\S+@\S+\.+\S/.test('dfdsf@fdfdfd.fdfdf')
true
*/
//모달창 띄우기
$('#login').on('click', function(){
$('.black-bg').addClass('show-modal');
});
//모달창 닫기
$('#close').on('click', function(){
$('.black-bg').removeClass('show-modal');
});
//전송버튼 클릭시
$("#gogo").on("click", function(e){ //(참고)$("form").on("submit", function(){})로 써도 똑같이 된다.
e.preventDefault(); //전송되는 이벤트를 전송 안되게 해준다.
//아이디나 비밀번호가 공백인 경우
if($(".form-control").eq(0).val()=="" ||$(".form-control").eq(1).val()=="" ){
alert("아이디와 비밀번호를 입력해주세요");
//아이디가 18자를 넘는경우
}else if(Number($(".form-control").eq(0).val().length)>18){
//Number(여기다가 숫자로 만들고 싶은 문자열을 넣음) ===> Number()를 통해 문자열을 숫자로 바꿈
alert("아이디가 18자를 넘었습니다")
}else{
//모두 충족시 전송
if(/\S+@\S+.\S/.test($(".form-control").eq(0).val())){
if(/[A-Z]/.test($(".form-control").eq(1).val())){
$("form").submit();
}else{
alert('비밀번호에 적어도 하나의 대문자가 있어야합니다')
}
}else{
alert('이메일 형식에 맞게 입력해주세요 ex) aaa@aaa.aaa')
}
}
})
//숙제
//비밀번호에 대문자가 적어도 하나가 있는지 없는지 검사
//위에 적어둠
</script>
<!--거의 모든 자바스크립트 라이브러리는 <body> 끝나기전에 넣는거 권장-->
<!--부트스트랩 JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
</body>
</html>success.html
전송완료~~~~~~~~~~~~~강의 출처: JavaScript 입문과 웹 UI개발
코딩애플 온라인 강좌 - 개발자도 단기완성!
단연 NO1 강사님의 NO.1 강의 역시나 명강입니다. IT 업계의 대치동 NO1. 강사같은 엄청난 강의력. 코딩애플님의 강의는, 엄청나게 기초적인 것부터 가르치는 듯 보이지만, 실제로 다루는 깊이는 절
codingapple.com
반응형
'애플코딩 javascript 강의' 카테고리의 다른 글
| JavaScript 입문과 웹 UI개발(16)-함수의 return 문법 & 소수점 다루기 (0) | 2022.10.04 |
|---|---|
| JavaScript 입문과 웹 UI개발(15)-코드 3줄로 캐러셀 (이미지 슬라이드) 만들기 (0) | 2022.10.04 |
| JavaScript 입문과 웹 UI개발(13)-setTimeout 타이머주는 법 (0) | 2022.10.03 |
| JavaScript 입문과 웹 UI개발(12)-변수, 사칙연산 실력향상 과제 (0) | 2022.10.03 |
| JavaScript 입문과 웹 UI개발(11)-변수문법과 Dark mode 버튼만들기 (0) | 2022.10.02 |