✍ 조건에 맞는 css,js 과제를 진행했다. 유효성 검사는 통과
<!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">
<title>title</title>
<link rel="stylesheet" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus
/pretendard/dist/web/static/pretendard-dynamic-subset.css" />
<style>
body {
background-color: rgb(222, 234, 246);
font-weight: bold;
font-family: "Pretendard", sans-serif;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,li {
list-style: none;
}
.register {
width: 400px;
height: auto;
top: 50%;
left: 50%;
padding: 10px 15px;
position: absolute;
transform: translate(-50%,-50%);
background: rgb(237, 237, 237);
color:#000;
}
.register input {
background-color: rgb(237, 237, 237);
padding:20px ;
border-bottom: 2px dashed #000;
border-top: none ;
border-left: none ;
border-right: none ;
float: right;
}
.register .con {
align-items: center;
}
.register .flex {
display: flex;
flex-direction: column;
}
.register .flex .con {
display: grid;
grid-template-columns: 1fr 1fr ;
}
.register .flex .eflex{
display: flex;
}
.register #btn {
background-color: rgb(197,224,181);
width: 100%;
height: 100%;
margin-top: 50px;
border: none;
font-size: 20px;
font-weight: bold;
}
.error_box{
color: red;
display: block;
padding-left: 160px;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="register">
<form action="">
<div class="flex">
<ul class="con">
<li>
아이디
</li>
<li>
<input type="text" name="userId" id="userId" required><br>
</li>
</ul><br>
<div class="error_box"></div>
<ul class="con">
<li>
패스워드
</li>
<li>
<input type="password" name="userPwd" id="userPwd" required>
</li>
</ul><br>
<div class="error_box"></div>
<ul class="con">
<li>
패스워드 확인
</li>
<li>
<input type="password" name="pwdCheck" id="pwdCheck" required>
</li>
</ul><br>
<div class="error_box"></div>
<ul class="con">
<li>
이메일
</li>
<li>
<div class="eflex">
<input type="email" name="email1" id="email1" style="width: 99px;"><br><br>@
<input type="email" name="email2" id="email2" style="width: 99px;">
</div>
</li>
</ul>
<ul class="con">
<li>
주소
</li>
<li>
<input type="text" name="address1"
id="address1" ><br>
<input type="text" name="address2" id="address2" >
</li>
</ul>
<ul>
<li>
<input type="submit" id="btn" value="가 입"></input>
</li>
</ul>
</div>
</form>
</div>
<script>
//변수
const userId = document.getElementById("userId");
const pwd = document.getElementById("userPwd");
const pwdCheck = document.getElementById("pwdCheck");
const error = document.querySelectorAll(".error_box");
const mmm = "영문자 대/소문자 특수문자, 숫자 포함 8~32자";
//핸들러
userId.addEventListener("focusout",checkId);
pwd.addEventListener("focusout",userPwd);
pwdCheck.addEventListener("focusout",checkPwd);
function checkId(){
if(userId.value == ""){
error[0].innerHTML = "필수 입력 항목 입니다."
}else{
error[0].innerHTML = "";
}
}
function userPwd(){
const pweff = /[a-zA-Z0-9~!@#$%^&*]{8,32}/;
if(pwd.value == ""){
error[1].innerHTML = "필수 입력 항목 입니다."
}else if(!pweff.test(pwd.value)){
error[1].innerHTML = mmm;
error[1].style.color = "black";
error[1].style.fontSize = "10px";
error[1].style.paddingleft = "80px";
}else{
error[1].innerHTML = "";
}
}
function checkPwd(){
if(pwdCheck.value == ""){
error[2].innerHTML = "필수 입력 항목 입니다."
}else{
error[2].innerHTML = "";
}
}
</script>
</body>
</html>✍만든 후 생각해보니 li 태그가 아닌 div, span으로 만들었으면 더 쉽게 만들지 않았을까...생각한다.
.png)