728x90
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
body{background-color:rgb(222,234,246);}
form{background-color:rgb(237,237,237);}
fieldset{border:none; padding:50px;}
input{background-color:rgb(237,237,237); border:none; border-bottom-style:dashed; width:100px;}
div{margin-top: 150px; margin-bottom: 150px; } /*margin-top: 100px; margin-bottom: 100px; */
label{display:inline-block; width:150px; text-align:left;}
span{display:block; padding-left:150px; font-size:15px;} /*블록안에 있으면서 블록 다 차지하게끔. 디브 움직이면 다 같이 움직이니 스팬으로 블록으로 지정해서 얼라인지정 할 수 있게해서 따로 움직일 수 있도록 */
#button{background-color:rgb(197,224,181); border:none; width:450px; padding:20px; border-radius:10px;} /* border-radius 설정 */
</style>
</head>
<body>
<form>
<fieldset>
<div>
<label>아이디 : </label><input type="text" id="userId" name="userId" onblur="requirement1()"> <!-- 위에 포커스 안맞춰지면 out시키겠다. 이벤트 발생안시키겠다 태그 위에 안맞춰지면 -->
<br><span id="checkId"></span>
</div>
<div>
<label>패스워드 : </label><input type="password" id="userPwd" name="userPwd" onblur="requirement2()"> <!-- onfocus to onblur -->
<br><span id="checkPwd"></span>
</div>
<div>
<label>패스워드 확인 : </label><input type="password" id="userPwdConf" name="userPwd" onblur="requirement3()">
<br><span id="checkPwdConf"></span>
</div>
<div>
<label>이메일: </label>
<input type="text" class="userEmail" name="userEmail">
@<input type="text" class="userEmail" name="userEmail">
</div>
<div>
<label>주소 : </label><input type="text" id="userAddress">
</div>
<div>
<button id="button" name="button">가입</button>
</div>
</fieldset>
</form>
<script>
/* 영대소문자, 필수요구사항 */
var userId = document.getElementById("userId");
var checkId = document.getElementById("checkId");
var userPwd = document.getElementById("userPwd");
var checkPwd = document.getElementById("checkPwd");
var userPwdConf = document.getElementById("userPwdConf");
var checkPwdConf = document.getElementById("checkPwdConf");
/* 영어 대/소문자 특수문자, 숫자 포함 8~32자*/
document.getElementById("userPwd").addEventListener("click",capital);
function capital(){
checkPwd.innerText="영어 대/소문자 특수문자, 숫자 포함 8~32자";
}
/* 필수요구사항 */
function requirement1(){
/* 비교할 것. 길이가 0또는 비어("")있냐. */
if(userId.value == "" || userId.value.length == 0){
/* 유저가 아이디 안넣었을 때 */
checkId.innerText="필수 입력 항목입니다";
userId.focus(); /* 내장객체 포커스 */
return false; /* 아디 안넣었을 때 다른거 못쓰게 막아주는 false 리턴 */
}else{
/* 유저가 아이디 넣을때 */
checkId.innerText="";
return true; /* 아디를 넣었을 때 true해서 비번 계속 쓸 수 허용, 넘겨주는 것*/
}
}
function requirement2(){
/* 비교할 것. 길이가 0또는 비어("")있냐. */
if(userPwd.value == "" || userPwd.value.length == 0){
/* 유저가 아이디 안넣었을 때 */
checkPwd.innerText="필수 입력 항목입니다";
userPwd.focus();
return false;
}else{
/* 유저가 아이디 넣을때 */
checkPwd.innerText="";
return true;
}
}
function requirement3(){
/* 비교할 것. 길이가 0또는 비어("")있냐. */
if(userPwdConf.value == "" || userPwdConf.value.length == 0){
/* 유저가 아이디 안넣었을 때 */
checkPwdConf.innerText="필수 입력 항목입니다";
userPwdConf.focus();
return false;
}else{
/* 유저가 아이디 넣을때 */
checkPwdConf.innerText="";
return true;
}
}
</script>
<!--
인라인으로 넣으면 할당된 공간에서만 움직일 수 있어서 정렬 같은게 안먹힘. 인라인은 text-align이 안됨
- span,
블록요소는 한줄 전체라 공간 제약이 없어서 width height를 다룰 수 있음
위치선정을 할려면 인라인이 요소라서 정렬할려면 id로
블록이면 줄바꿈도 적용
-->
</body>
</html>
728x90
반응형
'small steps > 1일 1코딩 - 코딩을 내 몸처럼' 카테고리의 다른 글
| [1일1코딩][JS] 배열(Array) & 배열의 메소드 (0) | 2022.04.23 |
|---|---|
| [1일1코딩][bootstrap] 시범사용 & 연결 (0) | 2022.04.22 |
| [1일1코딩][Servlet] 서버 연결 - java class, html (0) | 2022.04.20 |
| [1일1코딩][Servlet] 서버 연결 - web.xml, index.html 세팅 (0) | 2022.04.19 |
| [1일1코딩][jQuery] mouseenter & mouserout + attr (0) | 2022.04.19 |