<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
<!-- css파일을 불러오는 코드 -->
<!--icon을 사용하기 위한 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>
</style>
<!-- jquery cdn -->
<!-- javascript 작성 공간 -->
<script>
$(function(){
$("[name=memberId]").blur(function(){
var idRegex= /^[a-z0-9]{5,20}$/;
var inputId=$(this).val();
var isValid=idRegex.test(inputId);
console.log(isValid);
$(this).removeClass("success fail");
if(isValid){
$(this).addClass("success");
}
else{
$(this).addClass("fail");
}
});
$("[name=memberPw]").blur(function(){
var pwRegex=/^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$])[A-Za-z0-9!@#$]{8,16}$/;
var inputPw=$(this).val();
var isValid=pwRegex.test(inputPw);
// console.log(isValid);
$(this).removeClass("success fail");
if(isValid){
$(this).addClass("success");
}
else{
$(this).addClass("fail");
}
});
$("[name=memberCheckPw]").blur(function(){
var originPw=$("[name=memberPw]").val();
var checkPw=$(this).val();
var isValid=originPw==checkPw;
// console.log(isValid);
$(this).removeClass("success fail fail2");
console.log(originPw.length==0);
if(originPw.length==0){
$(this).addClass("fail2");
}
else if(isValid){
$(this).addClass("success");
}
else{
$(this).addClass("fail");
}
});
});
</script>
</head>
<body>
<div class="container w-400">
<div>
<h1>회원가입</h1>
</div>
<div class="row left">
<label>아이디</label>
<input type="text" name="memberId" class="form-input w-100">
<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">
<div class="success-feedback">올바른 비밀번호 형식입니다</div>
<div class="fail-feedback">영문, 숫자, 특수문자 8~20자로 작성하세요</div>
</div>
<div class="row left">
<label>비밀번호 확인</label>
<input type="password" name="memberCheckPw" class="form-input w-100">
<div class="success-feedback">비밀번호 일치</div>
<div class="fail-feedback">비밀번호 일치하지 않음</div>
<div class="fail2-feedback">비밀번호를 먼저 작성하세요</div>
</div>
</div>
</body>
</html>
'Javascript' 카테고리의 다른 글
| 전체선택과 개별체크박스에 대한 이벤트 구현(JQuery) (0) | 2023.10.24 |
|---|---|
| 체크박스 제어(JQuery) (0) | 2023.10.23 |
| 자기소개서 (0) | 2023.10.17 |
| input이벤트 (0) | 2023.10.16 |
| 사진 크기 조절 (jQuery) (0) | 2023.10.13 |