회원가입, 아이디칸, 비밀번호칸, 닉네임칸, 생년월일칸, 등록버튼
우선 row 클래스를 만든다. <div class="row"></div>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원 가입</title>
<link rel="stylesheet" type="text/css" href="./css/common.css">
<style>
.outbox{
width:500px;
}
</style>
<script>
function checkId(){
var regex = /^[a-z][a-z0-9]{7,19}$/;
var idInput = document.querySelector("input[name=id]");
var idSpan = document.querySelector("input[name=id] + span");
if(regex.test(idInput.value)){//정상
idSpan.textContent = "올바른 아이디입니다";
}
else{//이상
idSpan.textContent = "영문 소문자와 숫자를 섞어 8~20자 이내로 작성하세요";
}
}
function checkPw(){
var regex = /^[A-Za-z0-9!@#$\s]{8,16}$/;
var pwInput = document.querySelector("input[name=pw]");
var pwSpan = document.querySelector("input[name=pw] + span");
if(regex.test(pwInput.value)){
pwSpan.textContent = "올바른 비밀번호 형식입니다";
}
else{
pwSpan.textContent = "영문대/소문자와 숫자로 구성된 8~16자로 작성하세요";
}
}
function checkNickname(){
var regex = /^[가-힣]{2,10}$/;
var nicknameInput = document.querySelector("input[name=nickname]");
var nicknameSpan = document.querySelector("input[name=nickname] + span");
if(regex.test(nicknameInput.value)){
nicknameSpan.textContent = "올바른 닉네임입니다";
}
else{
nicknameSpan.textContent = "한글 2~10자로 작성하세요";
}
}
function checkBirth(){
var regex = /^((19|20)[0-9]{2})-((0[13578]|1[02])-(0[1-9]|1[0-9]|2[0-9]|3[0-1])|(0[469]|11)-(0[1-9]|1[0-9]|2[0-9]|30)|02-(0[1-9]|1[0-9]|2[0-8]))$/;
var birthInput = document.querySelector("input[name=birth]");
var birthSpan = document.querySelector("input[name=birth] + span");
if(regex.test(birthInput.value)){
birthSpan.textContent = "잘했어요!";
}
else{
birthSpan.textContent = "잘못된 생년월일 형식입니다";
}
}
</script>
</head>
<body>
<div class="outbox">
<div class="row center">
<h2>회원가입</h2> ->제일 위 회원가입 글씨를 넣는다.
</div>
<div class="row"> ->줄1 생성하기(텍스트창,아이디라고 가글자넣고,입력창)
<input type="text" name="id" placeholder="아이디" class="input" onblur="checkId();">
<span></span>
</div>
<div class="row"> ->줄2 생성하기(텍스트창,비밀번호 가글자 넣고,입력창)
<input type="text" name="pw" placeholder="비밀번호" class="input" onblur="checkPw();">
<span></span>
</div>
<div class="row"> ->줄3 생성하기(텍스트창,닉네임 가글자 넣고,입력창)
<input type="text" name="nickname" placeholder="닉네임" class="input" onblur="checkNickname();">
<span></span>
</div>
<div class="row"> ->줄4 생성하기(텍스트창,생년월일 가글자 넣고,입력창)
<input type="text" name="birth" placeholder="생년월일" class="input" onblur="checkBirth();">
<span></span>
</div>
<div class="row center"> ->줄5 가운데생성하기(전송폼만들고,가입하기글씨넣기)
<input type="submit" value="가입하기" class="input input-inline">
</div>
</div>
</body>
</html>