HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/membership.css">
<script type="text/javascript" src="js/membership.js"></script>
<title>회원가입</title>
</head>
<body>
<h1 align="center" style="text-decoration:underline">회 원 가 입</h1>
<br>
<hr>
<br>
<div class="red">
<div class="yellow">
<table>
<tr> <td bgcolor="lightgray" style="color:red" align="right">아이디</td>
<td><input size="15" type="text" name="id" id="id"><br>
<label id="ment" ></label></td></tr>
<!--<input type="button" name="아이디 확인" value="아이디 확인">-->
<tr> <td bgcolor="lightgray" style="color:red" align="right">패스워드</td>
<td><input size="15" type="text" name="password">
</td> </tr>
<tr> <td bgcolor="lightgray" style="color:red" align="right">패스워드 확인</td>
<td><input size="15" type="text" name="password check">
</td> </tr>
<tr> <td bgcolor="lightgray" style="color:red" align="right">이름</td>
<td><input size="15" type="text" name="name">
</td> </tr>
<tr> <td bgcolor="lightgray" style="color:red" align="right">닉네임</td>
<td><input size="15" type="text" name="nickname">
</td> </tr>
<tr> <td bgcolor="lightgray" style="color:red" align="right">이메일</td>
<td><input size="15" type="text" name="email">@<input size="15" type="text" name="email">
</td> </tr>
<tr> <td bgcolor="lightgray" style="color:red" align="right">이메일 수신</td>
<td><input size="15" type="radio" name="agree">수신<input size="15" type="radio" name="agree">미수신
</td> </tr>
<tr> <td bgcolor="lightgray" style="color:red" align="right">SMS 수신</td>
<td><input size="15" type="radio" name="agree2">수신<input size="15" type="radio" name="agree2">미수신
</td> </tr>
<tr> <td bgcolor="lightgray" style="color:red" align="right">연락처</td>
<td><select name="cellphone"><option value="">010</option><option value="">011</option><option value="">018</option></select>-<input size="15" type="text" name="cellphone">-<input size="15" type="text" name="cellphone">
</td> </tr>
<tr> <td bgcolor="lightgray" style="color:red" align="right">가입경로</td>
<td><select name="reason"><option value="" selected disabled hidden>-선택해주세요-<option value="">검색<option value="">지인추천<option value="">광고지<option value="">사이트 광고</select>
</td> </tr>
<tr> <td bgcolor="lightgray" style="color:red" align="right">취미</td>
<td><input size="15" type="checkbox" name="hobby">독서<input size="15" type="checkbox" name="hobby">수영<input size="15" type="checkbox" name="hobby">낚시<input size="15" type="checkbox" name="hobby">등산
</td> </tr>
<tr> <td bgcolor="lightgray" style="color:red" align="right">성별</td>
<td><input size="15" type="radio" name="gender">남자<input size="15" type="radio" name="gender">여자
</td> </tr>
<tr> <td bgcolor="lightgray" style="color:red" align="right">프로필사진</td>
<td> <input type="button" name="파일 선택" value="파일선택">선택된 파일 없음
</td> </tr>
<tr><td> </td>
</tr>
<tr><td> </td>
</tr>
<tr><td> </td>
<td> <input type="button" name="회원가입" value="회원가입">
</td> </tr>
</table>
</div>
</div>
</body>
</html>
JS
/**
*
*/
window.onload=function(){
var input=document.querySelector("input")
var ment=document.getElementById("ment")
//id입력안이 포커스를 잃으면(blur)
input.onblur=function(){
//alert(input.value)
//input.value.length(문자열)
var length=input.value.length
if(length>=5 && length<=20){
ment.innerHTML="멋진 아이디네요~!!";
ment.style.color="green"
}else{
ment.innerHTML="5~20자만 사용가능합니다";
ment.style.color="red"
}
}
}
결과
