Kembangkan halaman HTML terdaftar untuk mengumpulkan informasi pendaftaran pengguna. Termasuk: Nama (tidak dapat kosong), usia (harus lebih dari 17 tahun), berat (30-150kg), kelas (daftar drop-down), kata sandi login (setidaknya 8 digit), kata sandi konfirmasi (sama seperti kata sandi login), email (tidak dapat kosong), nomor telepon, qq, resume dan informasi lainnya. Dan membuat verifikasi yang sesuai untuk elemen tabel ini. Jika kesalahan terdeteksi, kesalahan akan ditampilkan dalam kata -kata merah setelah kotak input. Anda harus menggunakan teks kotak input teks baris tunggal, kotak daftar drop-down Pilih, kata sandi kotak input kata sandi, dan kotak input teks multi-line TextArea yang dipelajari di bagian sebelumnya. Ini adalah formulir pendaftaran pengguna yang lebih praktis.
Register.html:
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<title> Eksperimen 2 </iteme>
<tautan href = "check.css" rel = "stylesheet" type = "text/css">
<type skrip = "Text/JavaScript" src = "load.js">
</script>
</head>
<!-return validate () dan validate () adalah tentang apakah formulir dibersihkan->
<body onload = "load_greeting ()">
<Form id = "test" align = "kiri" onsubmit = "return validate ()">
<able>
<tr>
<td> Nama*: </td>
<td> <input type = "text" name = "name" id = "name" size = "20" onchange = 'check ("name")'> </td>
<td id = "namecheck" hidden = "true">*nama tidak bisa kosong </td>
</tr>
<tr>
<td> Usia: </td>
<td> <input type = "text" name = "use" id = "use" size = "20" onchange = 'check ("use")'> </td>
<td id = "ageCheck" hidden = "true">*usia tidak bisa kurang dari 17 tahun </td>
</tr>
<tr>
<td> Berat: </td>
<td> <input type = "text" name = "weight" id = "weight" size = "20" onchange = 'check ("weight")'> </td>
<td id = "weightcheck" hidden = "true">*Rentang berat adalah 30 ~ 150kg </td>
</tr>
<tr>
Kelas <td>: </td>
<td> <pilih id = "class" name = "class">
<pection> class0 </tipt>
<pection> class1 </pection>
<pection> class2 </pection>
<pection> class3 </pection>
</pilih>
</td>
</tr>
<tr>
<td> Kata Sandi*: </td>
<td> <input type = "password" name = "password" id = "password" size = "20" onchange = 'check ("password")'> </td>
<td id = "passwordcheck" hidden = "true">*panjang kata sandi kurang dari 8 </td>
</tr>
<tr>
<td> Konfirmasi Kata Sandi*: </td>
<td> <input type = "password" name = "cpassword" id = "cpassword" size = "20" onchange = 'check ("cpassword")'> </td>
<td id = "cpasswordcheck" hidden = "true">*dua passwd tidak sama </td>
</tr>
<tr>
<td> Email*: </td>
<td> <input type = "email" name = "email" id = "email" size = "20" onchange = 'check (this.id)'> </td>
<td id = "emailCheck" hidden = "true">*Nama emailnya ilegal! </td>
</tr>
<tr>
<td> tel: </td>
<td> <input type = "text" name = "Tel" id = "Tel" size = "20"> </td>
</tr>
<tr>
<td> qq: </td>
<td> <input type = "text" name = "qq" id = "qq" size = "20"> </td>
</tr>
<tr>
<td> Informasi Pribadi: </td>
<td> <textarea rows = "10" cols = "19"> </pextarea> </td>
</tr>
<tr>
<td colspan = "3">
<input type = "kirim" name = "kirim">
<input type = "reset" name = "reset">
</td>
</tr>
</boable>
</form>
</body>
</html>
check.css:
Salinan kode adalah sebagai berikut:
td.check {
Warna:#C00;
font-weight: tebal;
}
Load.js:
Salinan kode adalah sebagai berikut:
function check (str)
{
var x = document.getElementById (str);
var y = document.getElementById (str+"check");
// peringatan ("Periksa!");
if (str == "name")
{
if (x.value == "")
y.hidden = false;
kalau tidak
y.hidden = true;
}
lain jika (str == "usia")
{
if (isnan (x.value) || x.value <17)
y.hidden = false;
kalau tidak
y.hidden = true;
}
lain jika (str == "berat")
{
x = x.value;
if (isnan (x) || x <30 || x> 150)
y.hidden = false;
kalau tidak
y.hidden = true;
}
lain jika (str == "kata sandi")
{
x = x.value.length;
if (x <8)
{
y.hidden = false;
// peringatan ("Periksa!");
}
kalau tidak
y.hidden = true;
}
lain jika (str == "cpassword")
{
var z = document.geteLementById ("kata sandi"). nilai;
x = x.value;
if (x! = z)
y.hidden = false;
kalau tidak
y.hidden = true;
}
lain jika (str == "email")
{
x = x.value.indexof ("@")
if (x == -1)
y.hidden = false;
kalau tidak
y.hidden = true;
}
kembalikan y.hidden;
}
function validate ()
{
var arr = ["nama", "usia", "berat", "kata sandi", "cpassword", "email"];
var i = 0;
submitok = true;
while (i <= 5)
{
if (! centang (arr [i]))
{
peringatan (arr [i]+"salah!");
submitok = false;
merusak;
}
i ++;
}
if (submitok)
{
peringatan ("Kirim Sukses!");
Kembali Benar;
}
kalau tidak
{
peringatan ("Pengajuan Gagal");
mengembalikan false;
}
}
function load_greeting ()
{
// peringatan ("kunjungi /n");
}