반응형
Q>
회원 신청서를 받는 웹 페이즈를 작성하여 본다.
입력 필드에서 받은 문자열을 대상으로 정규식을 이용해 검증하도록 한다.
A>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiz 5</title>
<style>
table {
text-align: left;
border-spacing: 10px;
}
</style>
</head>
<body>
<h1>회원 신청서</h1>
<form action="#">
<table>
<tr>
<th>
<label for="name">이름*</label>
</th>
<td>
<input type="text" name="name" id="name" />
</td>
</tr>
<tr>
<th>
<label for="gender">성별*</label>
</th>
<td>
<input type="radio" name="gender" value="Male" checked="checked">남성
<input type="radio" name="gender" value="Female">여성
</td>
</tr>
<tr>
<th>
<label for="tel">휴대폰번호Phone*</label>
</th>
<td>
<input type="tel" name="tel" id="tel" />
</td>
</tr>
<tr>
<th>
<label for="email">이메일*</label>
</th>
<td>
<input type="email" name="email" id="email" />
</td>
</tr>
<tr>
<th>
<label for="password1">패스워드(6~8글자)*</label>
</th>
<td>
<input type="password" name="password1" />
</td>
</tr>
<tr>
<th>
<label for="password2">패스워드 검증*</label>
</th>
<td>
<input type="password" name="password2" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="submit" value="제출" onclick="formVerification(this.form)" />
<input type="reset" name="reset" value="지우기" />
</td>
</tr>
</table>
</form>
<script>
function formVerification(form) {
// 아이디 검증
var temp = form["name"].value;
if (temp == "") {
alert("아이디 입력 부분이 공백입니다.");
} else {
if (temp.length < 2) {
alert("아이디를 2자 이상 입력해주세요.");
} else {
alert("입력하신 아이디는 " + temp + " 입니다.");
}
}
// 휴대폰 번호 검증
var temp = form["tel"].value;
var exp = /^[0-9]+$/;
if (temp == "") {
alert("휴대폰 입력 부분이 공백입니다.");
} else {
if (temp.match(exp) || isNaN(Number(temp)) != true) {
alert("입력하신 휴대폰 번호는 " + temp + " 입니다.");
} else {
alert("휴대폰 번호에 - 를 빼고 입력해주세요.");
}
}
// 이메일 검증
var temp = form["email"].value
var exp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,}$/;
if (temp == "") {
alert("이메일 입력 부분이 공백입니다.");
} else {
if (temp.match(exp)) {
alert("입력하신 이메일은 " + temp + " 입니다.");
} else {
alert("입력하신 이메일을 확인해주세요")
}
}
// 패스워드 검증
var temp1 = form["password1"].value
var temp2 = form["password2"].value
if (temp1 == "" || temp2 == "") {
alert("패스워드 입력 부분이 공백입니다.");
} else {
if (temp1 == temp2) {
alert("패스워드가 정확합니다.");
} else {
alert("패스워드가 다릅니다.");
}
}
}
</script>
</body>
</html>
R>
 |
|
반응형
'Python_WEB > JavaScript' 카테고리의 다른 글
| [Ch11]자바스크립트와 캔버스로 게임 만들기 연습문제 2 (0) | 2020.12.27 |
|---|---|
| [Ch11]자바스크립트와 캔버스로 게임 만들기 연습문제 1 (0) | 2020.12.27 |
| [Ch10]DOM과 이벤트 처리, 입력 검증 연습문제 4 (0) | 2020.12.26 |
| [Ch10]DOM과 이벤트 처리, 입력 검증 연습문제 3 (0) | 2020.12.26 |
| [Ch10]DOM과 이벤트 처리, 입력 검증 연습문제 2 (0) | 2020.12.26 |
