2024-10-16
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function check() {
let userId = document.querySelector("#id");
let userPwd = document.querySelector("#pwd");
let userName = document.querySelector("#name");
let userPhone = document.querySelector("#phone");
let userAddr = document.querySelector("#addr");
// 아이디 입력창 입력 여부 확인
if(userId.value == "") {
alert("아이디를 입력하세요!!!");
userId.focus();
return false; // 이 코드를 빼면 인풋에 작성을 하지 않아도 링크로 넘어가게됨.
}
// 비밀번호 입력창 입력 여부 확인
if(userPwd.value == "") {
alert("비밀번호를 입력하세요!!!");
userPwd.focus();
return false;
}
// 이름 입력창 입력 여부 확인
if(userName.value == "") {
alert("이름를 입력하세요!!!");
userName.focus();
return false;
}
// 연락처 입력창 입력 여부 확인
if(userPhone.value == "") {
alert("연락처를 입력하세요!!!");
userPhone.focus();
return false;
}
// 주소 입력창 입력 여부 확인
if(userAddr.value == "") {
alert("주소를 입력하세요!!!");
userAddr.focus();
return false;
}
}
</script>
</head>
<body>
<div align="center">
<h2>회원 가입 폼 페이지</h2>
<form action="http://www.google.com"
onsubmit="return check()">
<!--
return 값이 ture인 경우 위 구글로 들어가지고
false 값이 될 경우 로그인이 불가능 하다.
-->
<table border="1">
<tr>
<th>아이디</th>
<td>
<input type="text" name="id" id="id">
</td>
</tr>
<tr>
<th>비밀번호</th>
<td>
<input type="password" name="pwd" id="pwd">
</td>
</tr>
<tr>
<th>이 름</th>
<td>
<input type="text" name="name" id="name">
</td>
</tr>
<tr>
<th>연락처</th>
<td>
<input type="text" name="phone" id="phone">
</td>
</tr>
<tr>
<th>주 소</th>
<td>
<input type="text" name="addr" id="addr">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="회원가입">
<input type="reset" value="다시작성">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
'JavaScript > 기초 내용 정리' 카테고리의 다른 글
| JavaScript(DOM)_Exam_01 (0) | 2024.10.16 |
|---|---|
| JavaScript(DOM)_11 (0) | 2024.10.16 |
| JavaScript(Function)_09 (0) | 2024.10.16 |
| JavaScript(Function)_08 (0) | 2024.10.16 |
| JavaScript(Function)_07 (0) | 2024.10.16 |