Développez une page HTML enregistrée pour collecter les informations d'enregistrement des utilisateurs. Y compris: Nom (ne peut pas être vide), l'âge (doit avoir plus de 17 ans), le poids (30-150 kg), la classe (liste déroulante), le mot de passe de connexion (au moins 8 chiffres de long), le mot de passe de confirmation (le même que le mot de passe de connexion), le courrier électronique (ne peut pas être vide), le numéro de téléphone, le QQ, le CV et d'autres informations. Et créer des vérifications correspondantes pour les éléments de ces tables. Si une erreur est détectée, une erreur sera affichée en mots rouges après la zone d'entrée. Vous devez utiliser le texte de la zone d'entrée de texte à ligne unique, la boîte de liste déroulante Sélectionner, le mot de passe de la zone d'entrée de mot de passe et la boîte d'entrée de texte multi-lignes apprise dans les sections précédentes. Il s'agit d'un formulaire d'enregistrement des utilisateurs plus pratique.
registre.html:
La copie de code est la suivante:
<! doctype html>
<html>
<adal>
<meta charset = "utf-8">
<Title> Expérience 2 </TITME>
<link href = "check.css" rel = "Stylesheet" type = "text / css">
<script type = "text / javascript" src = "load.js">
</cript>
</ head>
<! - return valider () et valider () consistent à savoir si le formulaire est effacé->
<body onload = "load_greeting ()">
<form id = "test" align = "Left" onSubmit = "return validate ()">
<ballage>
<tr>
<td> Nom *: </td>
<td> <input type = "text" name = "name" id = "name" size = "20" onchange = 'check ("name")'> </td>
<td id = "nameCheck" Hidden = "true"> * Le nom ne peut pas être vide </td>
</tr>
<tr>
<td> Âge: </td>
<td> <entrée type = "text" name = "age" id = "age" size = "20" onchange = 'check ("Age")'> </td>
<td id = "AgeCheck" Hidden = "true"> * L'âge ne peut pas avoir moins de 17 ans </td>
</tr>
<tr>
<TD> Poids: </td>
<Td> <Type d'entrée = "Text" name = "Weight" id = "Weight" size = "20" onChange = 'Check ("Weight")'> </td>
<td id = "Weightcheck" Hidden = "true"> * La plage de poids est de 30 ~ 150kg </td>
</tr>
<tr>
<TD> Classe: </td>
<td> <select id = "class" name = "class">
<Option> CLASS0 </ OPTION>
<option> Class1 </ Option>
<Option> Class2 </ Option>
<Option> Class3 </ Option>
</lect>
</td>
</tr>
<tr>
<TD> Mot de passe *: </td>
<td> <entrée type = "mot de passe" name = "mot de passe" id = "mot de passe" size = "20" onchange = 'check ("mot de passe")'> </td>
<td id = "PasswordCheck" Hidden = "true"> * Longueur de mot de passe inférieure à 8 </td>
</tr>
<tr>
<TD> Confirmer le mot de passe *: </td>
<td> <entrée type = "mot de passe" name = "cpassword" id = "cpassword" size = "20" onchange = 'check ("cpassword")'> </td>
<td id = "cpasswordcheck" Hidden = "true"> * deux passwd n'est pas le même </td>
</tr>
<tr>
<TD> Email *: </td>
<td> <entrée type = "e-mail" name = "e-mail" id = "e-mail" size = "20" onchange = 'check (this.id)'> </td>
<td id = "emailcheck" Hidden = "true"> * Le nom de messagerie est illégal! </td>
</tr>
<tr>
<TD> Tel: </td>
<Td> <Type de saisie = "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> Informations personnelles: </td>
<Td> <TextArea Rows = "10" Cols = "19"> </ TextArea> </td>
</tr>
<tr>
<td colspan = "3">
<input type = "soumi" name = "soumi">
<input type = "reset" name = "reset">
</td>
</tr>
</ table>
</ form>
</docy>
</html>
check.css:
La copie de code est la suivante:
td.check {
Couleur: # C00;
Police-poids: Bold;
}
Load.js:
La copie de code est la suivante:
Fonction Check (STR)
{
var x = document.getElementById (str);
var y = document.getElementById (str + "check");
// alert ("vérifier!");
if (str == "nom")
{
if (x.value == "")
y.hidden = false;
autre
y.hidden = true;
}
sinon si (str == "âge")
{
if (isnan (x.value) || x.value <17)
y.hidden = false;
autre
y.hidden = true;
}
sinon si (str == "poids")
{
x = x.value;
if (isnan (x) || x <30 || x> 150)
y.hidden = false;
autre
y.hidden = true;
}
else if (str == "mot de passe")
{
x = x.value.length;
si (x <8)
{
y.hidden = false;
// alert ("vérifier!");
}
autre
y.hidden = true;
}
else if (str == "cpassword")
{
var z = document.getElementById ("mot de passe"). valeur;
x = x.value;
si (x! = z)
y.hidden = false;
autre
y.hidden = true;
}
else if (str == "e-mail")
{
x = x.value.indexof ("@")
if (x == -1)
y.hidden = false;
autre
y.hidden = true;
}
retour y.hidden;
}
fonction valide ()
{
var arr = ["name", "âge", "poids", "mot de passe", "cpassword", "e-mail"];
var i = 0;
soumidOK = true;
tandis que (i <= 5)
{
si (! Vérifiez (arr [i]))
{
alert (arr [i] + "mal!");
soumidok = false;
casser;
}
i ++;
}
if (soumitok)
{
alert ("Soumettre le succès!");
Retour Vrai;
}
autre
{
alert ("Échec de la soumission");
retourne false;
}
}
fonction load_greeting ()
{
// alerte ("visiter / n");
}