<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
<!-- css 파일을 불러오는 코드 -->
<!-- 아이콘 사용을 위한 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">
<!-- 구글 웹 폰트 사용을 위한 CDN -->
<!-- 내가 만든 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 {
display: block;
}
.fail ~ .fail-feedback {
display: block;
}
.fail2 ~ .fail2-feedback {
display: block;
}
.success {
/* important는 우선순위를 최상위로 올린다 */
border-color: #00b894 !important;
background-image: url("./image/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("./image/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]");
var regex = /^[a-z0-9]{5,20}$/;
var isValid = regex.test(input.value);
input.classList.remove("success", "fail");
if(isValid) {
input.classList.add("success");//클래스 추가
}
else {
input.classList.add("fail");
}
}
function checkPw() {
var input = document.querySelector("[name=memberPw]");
var regex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$])[A-Za-z0-9!@#$]{8,16}$/;
var isValid = regex.test(input.value);
input.classList.remove("success", "fail");
input.classList.add(isValid ? "success" : "fail");
}
function checkPw2() {
var pw = document.querySelector("[name=memberPw]");
var pwCheck = document.querySelector("#password-check");
//var isValid = 비밀번호가 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-500">
<div class="row">
<h1>회원가입</h1>
</div>
<div class="row left">
<label>아이디</label>
<input type="text" name="memberId" class="form-input w-100" oninput="checkId();">
<div class="success-feedback">멋진 아이디입니다!</div>
<div class="fail-feedback">아이디는 영문과 숫자 5~20자로 작성하세요</div>
</div>
<div class="row left">
<label>비밀번호</label>
<input type="password" name="memberPw" class="form-input w-100" oninput="checkPw();">
<div class="success-feedback">올바른 비밀번호 형식입니다!</div>
<div class="fail-feedback">비밀번호는 영문,숫자,특수문자를 반드시 포함하여 8~16자로 작성하세요</div>
</div>
<div class="row left">
<label>비밀번호 확인</label>
<input type="password" id="password-check" class="form-input w-100" oninput="checkPw2();">
<div class="success-feedback">비밀번호가 일치합니다</div>
<div class="fail-feedback">비밀번호가 일치하지 않습니다</div>
<div class="fail2-feedback">비밀번호를 먼저 작성하세요</div>
</div>
</div>
</body>
</html>
'Javascript' 카테고리의 다른 글
| 사용자 등록(Form) (0) | 2023.09.14 |
|---|---|
| 기본 이벤트 제어 (0) | 2023.09.13 |
| 정규표현식 (0) | 2023.09.11 |
| 글자수 입력제한 (0) | 2023.09.08 |
| 글자 크기 조절 (2) | 2023.09.07 |