Entwickeln Sie eine registrierte HTML -Seite, um die Benutzerregistrierungsinformationen zu sammeln. Einschließlich: Name (nicht leer sein), Alter (muss über 17 Jahre alt sein), Gewicht (30-150 kg), Klasse (Dropdown-Liste), Anmeldungskennwort (mindestens 8 Ziffern lang), Bestätigungskennwort (das gleiche wie das Anmeldekennwort), E-Mail (kann nicht leer sein), Telefonnummer, QQ, Lebenslauf und andere Informationen. Und erstellen Sie entsprechende Überprüfungen für die Elemente dieser Tabellen. Wenn ein Fehler festgestellt wird, wird nach dem Eingabefeld ein Fehler in roten Wörtern angezeigt. Sie sollten das Textefeld für einleitende Texteingänge, ein Dropdown-Listenfeld auswählen, Kennwort-Kennwort und Multi-Line-Texteingangsfeld Textarea in den vorherigen Abschnitten gelernt. Dies ist ein praktischere Formular für Benutzerregistrierung.
Register.html:
Die Codekopie lautet wie folgt:
<! docType html>
<html>
<kopf>
<meta charset = "utf-8">
<title> Experiment 2 </title>
<link href = "check.css" rel = "stylesheet" type = "text/css">
<script type = "text/javaScript" src = "load.js">
</script>
</head>
<!-return validate () und validate () geht davon, ob das Formular gelöscht wird.
<body onload = "load_greeting ()">
<form id = "test" align = "links" OnSubmit = "return validate ()">
<tabelle>
<tr>
<td> Name*: </td>
<td> <Eingabe type = "text" name = "name" id = "name" size = "20" onchange = 'check ("name")'> </td>
<td id = "namecheck" hidden = "true">*Name kann nicht leer sein </td>
</tr>
<tr>
<td> Alter: </td>
<td> <Eingabe type = "text" name = "Alter" id = "Alter" size = "20" onchange = 'check ("Alter")'> </td>
<td id = "agecheck" hidden = "true">*Alter kann nicht weniger als 17 Jahre alt sein </td>
</tr>
<tr>
<td> Gewicht: </td>
<td> <Eingabe type = "text" name = "Gewicht" id = "Gewicht" size = "20" onchange = 'check ("Gewicht")'> </td>
<td id = "gewichtcheck" hidden = "true">*Gewichtsbereich beträgt 30 ~ 150 kg </td>
</tr>
<tr>
<td> Klasse: </td>
<td> <select id = "class" name = "class">
<option> class0 </option>
<option> class1 </option>
<option> class2 </option>
<option> class3 </option>
</select>
</td>
</tr>
<tr>
<td> Passwort*: </td>
<td> <Eingabe type = "password" name = "password" id = "password" size = "20" onchange = 'prüfen ("Passwort")'> </td>
<td id = "passwayCheck" hidden = "true">*Kennwortlänge weniger als 8 </td>
</tr>
<tr>
<td> Passwort bestätigen*: </td>
<td> <Eingabe type = "password" name = "cpassword" id = "cpassword" size = "20" onchange = 'check ("cpassword")'> </td>
<td id = "cpasswordcheck" hidden = "true">*Zwei PassWD sind nicht gleich </td>
</tr>
<tr>
<td> E -Mail*: </td>
<td> <Eingabe type = "E -Mail" name = "E -Mail" id = "E -Mail" size = "20" onchange = 'prüfen (this.id)'> </td>
<td id = "Emailcheck" Hidden = "True">*Der E -Mail -Name ist illegal! </td>
</tr>
<tr>
<td> Tel.: </td>
<td> <Eingabe type = "text" name = "tel" id = "tel" size = "20"> </td>
</tr>
<tr>
<td> qq: </td>
<td> <Eingabe type = "text" name = "qq" id = "qq" size = "20"> </td>
</tr>
<tr>
<td> Persönliche Informationen: </td>
<td> <textarea rows = "10" cols = "19"> </textarea> </td>
</tr>
<tr>
<td colspan = "3">
<Eingabe type = "subieren" name = "subieren">
<Eingabe type = "reset" name = "reset">
</td>
</tr>
</table>
</form>
</body>
</html>
check.css:
Die Codekopie lautet wie folgt:
td.check {
Farbe:#C00;
Schriftgewicht: fett;
}
load.js:
Die Codekopie lautet wie folgt:
Funktionsprüfung (STR)
{
var x = document.getElementById (str);
var y = document.getElementById (str+"check");
// alarm ("Check!");
if (str == "Name")
{
if (x.Value == "")
y.hidden = false;
anders
y.hidden = true;
}
sonst wenn (str == "Alter")
{
if (isnan (x.Value) || X.Value <17)
y.hidden = false;
anders
y.hidden = true;
}
sonst wenn (str == "Gewicht")
{
x = x.Value;
if (isnan (x) || x <30 || x> 150)
y.hidden = false;
anders
y.hidden = true;
}
sonst wenn (str == "Passwort")
{
x = x.Value.length;
if (x <8)
{
y.hidden = false;
// alarm ("Check!");
}
anders
y.hidden = true;
}
sonst wenn (str == "cpassword")
{
var z = document.getElementById ("Passwort"). Wert;
x = x.Value;
if (x! = z)
y.hidden = false;
anders
y.hidden = true;
}
sonst wenn (str == "E -Mail")
{
x = x.Value.indexof ("@")
if (x == -1)
y.hidden = false;
anders
y.hidden = true;
}
kehre y.hidden zurück;
}
Funktion validat ()
{
var arr = ["Name", "Alter", "Gewicht", "Passwort", "CPassword", "E -Mail"];
var i = 0;
subestok = true;
während (i <= 5)
{
if (! Check (arr [i]))
{
alarm (arr [i]+"falsch!");
subestok = false;
brechen;
}
i ++;
}
if (subestok)
{
alarm ("erfolgreich einreichen!");
zurückkehren;
}
anders
{
alarm ("Einreichung fehlgeschlagen");
false zurückgeben;
}
}
Funktion load_greeting ()
{
// alarm ("besuchen /n");
}