로그인 또는 회원가입할 때 필수 입력값을 입력하지 않고 넘길 경우 "~~~를 확인해주세요" 같은 메시지가 뜬다.
어떻게 띄우는 걸까?
✔ CSS(생략가능)
/* 입력 폼 css */
input {
display: block;
width: 220px; height: 45px;
padding: 5px; margin: 10px 0;
border: 1px solid gainsboro;
border-radius: 3px;
box-sizing: border-box;
overflow: hidden;
transition: all 0.3s;
}
/* 입력 폼을 마우스로 클릭했을 때 */
input:focus, input:active {
border: 1px solid #4faaa7;
outline: none;
}
/* 버튼 css */
button {
display: block;
width: 220px; height: 45px;
padding: 5px; margin: 10px 0;
color: #fff;
background: #4faaa7;
border: none;
cursor: pointer;
transition: all 0.3s;
}
/* 버튼에 마우스를 올리면 */
button:hover {
background: #3c8f8c;
}
✔ HTML
<form action="">
<input type="text" id="id" placeholder="아이디">
<input type="password" id="pw" placeholder="비밀번호">
<input type="text" id="name" placeholder="이름">
<input type="text" id="email" placeholder="이메일">
<button type="submit" onclick="submit_check();">등록</button><!-- onclick에 자바스크립트로 실행할 이름 지정 -->
</form>
✔ JAVA SCRIPT
<script>
function submit_check() {
// 입력 폼 아이디값 담기
var id = document.getElementById("id");
var pw = document.getElementById("pw");
var name = document.getElementById("name");
var email = document.getElementById("email");
if (id.value == ""){
alert("아이디를 입력하세요.");
id.focus();
return false;
} else if (pw.value == "") {
alert("비밀번호를 입력하세요.");
pw.focus();
return false;
} else if (name.value == ""){
alert("이름을 입력하세요.");
name.focus();
return false;
} else if (email.value == ""){
alert("메일을 입력하세요.");
email.focus();
return false;
} else {
alert("제출");
submit();
}
};
</script>if else문을 써서 사용해봤다.
순서대로 아이디 - 비밀번호 - 이름 - 이메일을 두고
아이디를 입력하지 않으면 아이디 앨럿을
아이디, 비밀번호만 입력하고 이름과 이메일을 입력하지 않았으면 이름 앨럿을
아이디, 이름, 이메일만 입력하고 이름을 입력하지 않았으면 이름 앨럿을 띄우게 했다.
if else문은 if - if else - ... - else문으로 끝나고 중간의 if else를 쭉 쓰다가 끝내고 싶을 때 else를 써서 마치면 된다.