-
글쓴이글
-
2023년 2월 25일 00:20 #70010
박도영참가자<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<title>Document</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 0.5s; } .white-bg { background: white; border-radius: 5px; padding: 30px; } .show-box { transition: all 0.5s; visibility: visible; opacity: 1; } .list-group { visibility: hidden; opacity: 0; transition: all 0.5s; height: 0px; } .show { visibility: visible; opacity: 1; transition: all 0.5s; height: 210px; overflow: hidden; } .main-bg { padding: 100px 20px; background: lightgray; } .badge { cursor: pointer; } .navbar { transition: all 1s; } </style> </head> <body> <div class="black-bg"> <div class="white-bg"> <h4 id="title">로그인하세요</h4><form action=""> <div class="my-3"> <input type="text" id="id" class="form-control" /> </div> <div class="my-3"> <input type="password" id="pw" class="form-control" /> </div> <button type="submit" class="btn btn-primary">전송</button> <button id="close" type="button" class="btn btn-danger">닫기</button> </form> </div> </div> <nav class="navbar navbar-dark bg-black"> <div class="container-fluid"> <span class="navbar-brand">Navbar</span> <span class="badge bg-dark">Dark 🔄</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 class="list-group-item">A second item
<li class="list-group-item">A third item
<li class="list-group-item">A fourth item
<li class="list-group-item">And a fifth one
<div class="main-bg"> <h4>Shirts on sale</h4> <button id="btn-login" class="btn btn-danger">로그인</button> </div> <div class="alert alert-danger"><span class="number"></span></div> <script> // setTimeout(function () { // document.querySelector(".alert").style.display = "none"; // }, 1000); var time = setInterval(함수, 1000); var count = 6; function 함수() { count--; document.querySelector(".alert").innerHTML = count + "초"; if (count === 0) { clearInterval(time); } } </script> <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous" ></script> <script> var click = 0; document.querySelector(".badge").addEventListener("click", function () { click++; if (click % 2 == 1) { light(); document.querySelector(".badge").innerHTML = "Light 🔄"; document.querySelector(".bg-dark").classList.add("bg-white"); document.querySelector(".bg-dark").style.color = "black"; } else { dark(); document.querySelector(".badge").innerHTML = "Dark 🔄"; document.querySelector(".bg-dark").classList.remove("bg-white"); document.querySelector(".bg-dark").style.color = "white"; } }); function light() { document .querySelector(".navbar") .classList.add("bg-white", "navbar-light"); document.querySelector(".navbar").classList.remove("navbar-dark"); } function dark() { document .querySelector(".navbar") .classList.remove("bg-white", "navbar-light"); document.querySelector(".navbar").classList.add("navbar-dark"); } /* input 입력한 값에 관하여 값을 변경 change input에 입력한값이 바뀌고 포커스를 잃을때 발생 */ document.getElementById("id").addEventListener("input", function () { document.getElementById("title").innerHTML = "아이디는 6자 이상 그리고 이메일 형식입니다."; });
/* form 전송버튼 누르면 저기 input에 입력한 값이 공백이면 알림창띄워주세요 */ document.querySelector("form").addEventListener("submit", function (e) { let idcontent = document.querySelector("#id").value; let regex = /([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; if (regex.test(idcontent) { alert("이메일이 아닙니다."); e.preventDefault(); } 요기가 정규식 코드 입니다.if (idcontent === "" ) { e.preventDefault(); //폼 전송 막기 alert("아이디를 입력해주세요"); } else if (document.querySelector("#pw").value === "") { e.preventDefault(); //폼 전송 막기 alert("비밀번호 입력해주세요"); } else if (document.querySelector("#pw").value.length < 6) { //몇글자인지? e.preventDefault(); //폼 전송 막기 alert("비밀번호 너무 적다"); } }); $("#btn-login").on("click", function () { $(".black-bg").addClass("show-box"); }); $("#close").on("click", function () { $(".black-bg").removeClass("show-box"); }); $(".navbar-toggler").on("click", function () { $(".list-group").toggleClass("show"); }); </script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous" ></script> </body> </html> <!-- 유저가 입력한게 이메일형식인지 검사? 정규식 쓰면가능1. 문자 범위 지정 가능 [a-z] 2. [A-Z] / 아무 알파벳 1개 [a-zA-Z], 한국어문자하나[ㄱ-ㅎ가-힣] 3. 숫자 [0-9] 4. /\S/ 아무문자 1개 5. /^a/ a로 시작하냐~ 6. /a$/ a로 끝나냐~ 7. /a|b/ , 8.이메일 ? /\S+@\S+\.\S+/ .은 특별한 정규식 문법임 단 \S 아무문자 1개를 뜻함 그래서 + 기호붙어야함
. . . regex test -->
2023년 2월 25일 00:27 #70013
박도영참가자아.. 해결완료
document.querySelector("form").addEventListener("submit", function (e) { let idcontent = document.querySelector("#id").value; let regex = /([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; if (regex.test(idcontent) { alert("이메일이 아닙니다."); e.preventDefault(); } 요기가 정규식 코드 입니다. 이러한 식으로 제가 이메일로 해보니 이메일이 아니라고 뜨네요.. 제대로 된 이메일을 검사하고있었네요..코드 수정은 ..
document.querySelector("form").addEventListener("submit", function (e) { let idcontent = document.querySelector("#id").value; let regex = /([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; if (regex.test(idcontent)) { return true; } else { alert("이메일이 아니무리다"); e.preventDefault(); } -
글쓴이글
- 답변은 로그인 후 가능합니다.