-
글쓴이글
-
2022년 5월 10일 13:53 #33614
Heok Joon참가자<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style></style><title>Hello, world!</title>
<style>
.black-bg {
width: 100%;
height: 100%;
position: fixed;
background: rgba(0, 0, 0, 0.5);
z-index: 5;
padding: 30px;
visibility: hidden;
opacity: 0;
transition: all 1s;
top: -1000px;
}
.white-bg {
background: white;
border-radius: 5px;
padding: 30px;
}
.show-modal {
visibility: visible;
opacity: 1;
top: 0;
}
</style>
</head>
<body>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand">Navbar</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<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><button id="modalOpen">로그인</button>
<div class="black-bg">
<div class="white-bg">
<h4>로그인하세요</h4>
<form action="success.html">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label"
>Email address</label
>
<input
class="form-control"
id="exampleInputEmail1"
/>
<div id="emailHelp" class="form-text">
We'll never share your email with anyone else.
</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label"
>Password</label
>
<input
class="form-control"
id="exampleInputPassword1"
/>
</div>
<div class="mb-3 form-check">
<input
type="checkbox"
class="form-check-input"
id="exampleCheck1"
/>
<label class="form-check-label" for="exampleCheck1"
>Check me out</label
>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<button class="btn btn-danger" id="close" onclick="none()">닫기</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script>
$("#modalOpen").on("click", function () {
$(".black-bg").addClass("show-modal");
});document.querySelector('form').addEventListener('submit',function(){
var 입력한값 = document.querySelector('.email').value;
if (입력한값 == ''){
alert('아이디 입력안함');
}if( /\S+@\S+.\S+/.test( document.querySelector('.email').value)){
alert('이메일 형식아님');
}
});
</script>
</body>
</html>이메일형식이 아님이라고 alert를 해줘야하는데 그냥 전송을 시켜버리네요
아무것도 안쳤을땐 '아이디 입력안함'을 띄워주고요 무슨 문제가 있는걸까요 ?
-
글쓴이글
- 답변은 로그인 후 가능합니다.