사용자 등록 정보를 수집하기 위해 등록 된 HTML 페이지를 개발하십시오. 포함 : 이름 (비어있을 수 없음), 나이 (17 세 이상이어야 함), 체중 (30-150kg), 클래스 (드롭 다운 목록), 로그인 암호 (8 자리 길이), 확인 암호 (로그인 암호와 동일), 이메일 (비어있을 수 없음), 전화 번호, QQ, 이력서 및 기타 정보. 이 테이블의 요소에 대한 해당 검증을 만듭니다. 오류가 감지되면 입력 상자 다음에 오류가 빨간색으로 표시됩니다. 단일 라인 텍스트 입력 상자 텍스트, 드롭 다운 목록 상자 선택, 암호 입력 상자 암호 및 멀티 라인 텍스트 입력 상자 Textarea를 사용해야합니다. 이것은보다 실용적인 사용자 등록 양식입니다.
register.html :
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<title> 실험 2 </title>
<link href = "check.css"rel = "Stylesheet"type = "text/css">
<script type = "text/javaScript"src = "load.js">
</스크립트>
</head>
<!-return validate () 및 validate ()는 양식이 지워진지 여부에 관한 것입니다.
<body onload = "load_greeting ()">
<form id = "test"align = "left"onsubmit = "return validate ()">
<테이블>
<tr>
<td> 이름*: </td>
<td> <입력 유형 = "text"name = "name"id = "name"size = "20"onchange = 'check ( "name")'> </td>
<td id = "namecheck"hidden = "true">*이름이 비어질 수 없습니다 </td>
</tr>
<tr>
<td> 나이 : </td>
<td> <입력 유형 = "text"name = "age"id = "age"size = "20"onchange = 'check ( "age")'> </td>
<td id = "agecheck"hidden = "true">*연령은 17 세 미만일 수 없습니다 </td>
</tr>
<tr>
<td> 무게 : </td>
<td> <입력 유형 = "text"name = "weight"id = "weight"size = "20"onchange = 'check ( "weight")'> </td>
<td id = "headcheck"hidden = "true">*무게 범위는 30 ~ 150kg </td>입니다
</tr>
<tr>
<td> 클래스 : </td>
<td> <select id = "class"name = "class">
<옵션> Class0 </옵션>
<옵션> 클래스 1 </옵션>
<옵션> class2 </옵션>
<옵션> 클래스 3 </옵션>
</선택>
</td>
</tr>
<tr>
<td> 비밀번호*: </td>
<td> <입력 유형 = "비밀번호"이름 = "비밀번호"id = "password"size = "20"onchange = 'check ( "password")'> </td>
<td id = "passwordCheck"hidden = "true">*비밀번호 길이 8 </td>
</tr>
<tr>
<td> 비밀번호 확인*: </td>
<td> <입력 유형 = "password"name = "cpassword"id = "cpassword"size = "20"onchange = 'check ( "cpassword")'> </td>
<td id = "cpasswordcheck"hidden = "true">*두 passwd는 동일하지 않습니다 </td>
</tr>
<tr>
<td> 이메일*: </td>
<td> <입력 유형 = "이메일"이름 = "이메일"id = "email"size = "20"onchange = 'check (this.id)'> </td>
<td id = "emailCheck"hidden = "true">*이메일 이름은 불법입니다! </td>
</tr>
<tr>
<td> 전화 : </td>
<td> <입력 유형 = "text"name = "tel"id = "tel"size = "20"> </td>
</tr>
<tr>
<td> qq : </td>
<td> <입력 유형 = "text"name = "qq"id = "qq"size = "20"> </td>
</tr>
<tr>
<td> 개인 정보 : </td>
<td> <Textarea rows = "10"cols = "19"> </textarea> </td>
</tr>
<tr>
<td colspan = "3">
<입력 유형 = "제출"이름 = "제출">
<입력 유형 = "재설정"이름 = "Reset">
</td>
</tr>
</테이블>
</form>
</body>
</html>
check.css :
코드 사본은 다음과 같습니다.
TD. 체크 {
색상 :#C00;
글꼴 중량 : 대담한;
}
load.js :
코드 사본은 다음과 같습니다.
기능 확인 (str)
{
var x = document.getElementById (str);
var y = document.getElementById (str+"check");
// ALERT ( "Check!");
if (str == "name")
{
if (x.value == "")
y.hidden = 거짓;
또 다른
y.hidden = true;
}
else if (str == "age")
{
if (isnan (x.value) || x. value <17)
y.hidden = 거짓;
또 다른
y.hidden = true;
}
else if (str == "weight")
{
x = x. 값;
if (isnan (x) || x <30 || x> 150)
y.hidden = 거짓;
또 다른
y.hidden = true;
}
else if (str == "password")
{
x = x.value.length;
if (x <8)
{
y.hidden = 거짓;
// ALERT ( "Check!");
}
또 다른
y.hidden = true;
}
else if (str == "cpassword")
{
var z = document.getElementById ( "password"). 값;
x = x. 값;
if (x! = z)
y.hidden = 거짓;
또 다른
y.hidden = true;
}
else if (str == "이메일")
{
x = x.value.indexof ( "@")
if (x == -1)
y.hidden = 거짓;
또 다른
y.hidden = true;
}
y.hidden을 반환;
}
function validate ()
{
var arr = [ "name", "age", "weight", "password", "cpassword", "이메일"];
var i = 0;
제출 = true;
while (i <= 5)
{
if (! check (arr [i])
{
경고 (arr [i]+"잘못!");
제출 = 거짓;
부서지다;
}
i ++;
}
if (제출)
{
Alert ( "성공 제출!");
진실을 반환하십시오.
}
또 다른
{
경고 ( "제출 실패");
거짓을 반환합니다.
}
}
함수 load_greeting ()
{
// Alert ( "방문 /n");
}