พัฒนาหน้า HTML ที่ลงทะเบียนเพื่อรวบรวมข้อมูลการลงทะเบียนผู้ใช้ รวมถึง: ชื่อ (ไม่สามารถว่างเปล่า) อายุ (ต้องมีอายุมากกว่า 17 ปี) น้ำหนัก (30-150kg) คลาส (รายการดรอปดาวน์) รหัสผ่านเข้าสู่ระบบ (อย่างน้อย 8 หลัก) รหัสผ่านยืนยัน (เช่นเดียวกับรหัสผ่านเข้าสู่ระบบ) อีเมล (ไม่ว่าง) หมายเลขโทรศัพท์ qq resume และข้อมูลอื่น ๆ และสร้างการตรวจสอบที่สอดคล้องกันสำหรับองค์ประกอบของตารางเหล่านี้ หากตรวจพบข้อผิดพลาดข้อผิดพลาดจะปรากฏเป็นคำสีแดงหลังจากกล่องอินพุต คุณควรใช้ข้อความกล่องอินพุตข้อความเดียว, กล่องรายการแบบดรอปดาวน์, รหัสผ่านอินพุตรหัสผ่านและกล่องป้อนข้อความหลายบรรทัด textarea เรียนรู้ในส่วนก่อนหน้า นี่เป็นแบบฟอร์มการลงทะเบียนผู้ใช้ที่ใช้งานได้จริงมากขึ้น
register.html:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> ทดลอง 2 </title>
<link href = "check.css" rel = "stylesheet" type = "text/css">
<script type = "text/javascript" src = "load.js">
</script>
</head>
<!-return validate () และตรวจสอบ () เกี่ยวกับว่ารูปแบบจะถูกล้าง->
<body onload = "load_greeting ()">
<form id = "test" allign = "left" onsubmit = "return validate ()">
<table>
<tr>
<td> ชื่อ*: </td>
<td> <อินพุต type = "text" name = "name" id = "name" size = "20" onChange = 'ตรวจสอบ ("ชื่อ")'> </td>
<td id = "nameCheck" hidden = "true">*ชื่อไม่ว่าง </td>
</tr>
<tr>
<td> อายุ: </td>
<td> <อินพุต type = "text" name = "อายุ" id = "อายุ" size = "20" onChange = 'ตรวจสอบ ("อายุ")'> </td>
<td id = "ageCheck" hidden = "true">*อายุไม่น้อยกว่า 17 ปี </td>
</tr>
<tr>
<td> น้ำหนัก: </td>
<td> <อินพุต type = "text" name = "weight" id = "weight" size = "20" onchange = 'ตรวจสอบ ("น้ำหนัก")'> </td>
<td id = "weightcheck" hidden = "true">*ช่วงน้ำหนักคือ 30 ~ 150kg </td>
</tr>
<tr>
<td> คลาส: </td>
<td> <เลือก id = "คลาส" ชื่อ = "คลาส">
<potion> Class0 </potion>
<potion> Class1 </potion>
<potion> class2 </potion>
<potion> class3 </potion>
</เลือก>
</td>
</tr>
<tr>
<td> รหัสผ่าน*: </td>
<td> <อินพุต type = "รหัสผ่าน" name = "รหัสผ่าน" id = "รหัสผ่าน" size = "20" onchange = 'ตรวจสอบ ("รหัสผ่าน")'> </td>
<td id = "passwordcheck" hidden = "true">*ความยาวรหัสผ่านน้อยกว่า 8 </td>
</tr>
<tr>
<td> ยืนยันรหัสผ่าน*: </td>
<td> <อินพุต type = "รหัสผ่าน" name = "cpassword" id = "cpassword" size = "20" onchange = 'ตรวจสอบ ("cpassword")'> </td>
<td id = "cpasswordcheck" hidden = "true">*สอง passwd ไม่เหมือนกัน </td>
</tr>
<tr>
<td> อีเมล*: </td>
<td> <อินพุต type = "อีเมล" name = "อีเมล" id = "อีเมล" size = "20" onChange = 'ตรวจสอบ (this.id)'> </td>
<td id = "emailcheck" hidden = "true">*ชื่ออีเมลผิดกฎหมาย! </td>
</tr>
<tr>
<td> โทรศัพท์: </td>
<td> <อินพุต type = "text" name = "tel" id = "tel" size = "20"> </td>
</tr>
<tr>
<td> qq: </td>
<td> <อินพุต type = "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">
<อินพุต type = "ส่ง" name = "ส่ง">
<อินพุต type = "รีเซ็ต" name = "รีเซ็ต">
</td>
</tr>
</table>
</form>
</body>
</html>
check.css:
การคัดลอกรหัสมีดังนี้:
td.check {
สี:#c00;
Font-Weight: ตัวหนา;
-
โหลด. js:
การคัดลอกรหัสมีดังนี้:
การตรวจสอบฟังก์ชั่น (STR)
-
var x = document.getElementById (str);
var y = document.getElementById (str+"ตรวจสอบ");
// Alert ("ตรวจสอบ!");
ถ้า (str == "ชื่อ")
-
ถ้า (x.value == "")
y.hidden = false;
อื่น
y.hidden = true;
-
อื่นถ้า (str == "อายุ")
-
if (isnan (x.value) || x.value <17)
y.hidden = false;
อื่น
y.hidden = true;
-
อื่นถ้า (str == "น้ำหนัก")
-
x = x.value;
if (isnan (x) || x <30 || x> 150)
y.hidden = false;
อื่น
y.hidden = true;
-
อื่นถ้า (str == "รหัสผ่าน")
-
x = x.value.length;
ถ้า (x <8)
-
y.hidden = false;
// Alert ("ตรวจสอบ!");
-
อื่น
y.hidden = true;
-
อื่นถ้า (str == "cpassword")
-
var z = document.getElementById ("รหัสผ่าน") ค่า;
x = x.value;
ถ้า (x! = z)
y.hidden = false;
อื่น
y.hidden = true;
-
อื่นถ้า (str == "อีเมล")
-
x = x.value.indexof ("@")
ถ้า (x == -1)
y.hidden = false;
อื่น
y.hidden = true;
-
กลับ y.hidden;
-
การตรวจสอบฟังก์ชั่น ()
-
var arr = ["ชื่อ", "อายุ", "น้ำหนัก", "รหัสผ่าน", "cpassword", "อีเมล"];
var i = 0;
submitok = true;
ในขณะที่ (i <= 5)
-
ถ้า (! ตรวจสอบ (arr [i]))
-
การแจ้งเตือน (arr [i]+"ผิด!");
submitok = false;
หยุดพัก;
-
i ++;
-
ถ้า (submitok)
-
การแจ้งเตือน ("ส่งประสบความสำเร็จ!");
กลับมาจริง;
-
อื่น
-
การแจ้งเตือน ("การส่งล้มเหลว");
กลับเท็จ;
-
-
ฟังก์ชั่น load_greeting ()
-
// Alert ("เยี่ยมชม /n");
-