Desarrolle una página HTML registrada para recopilar información de registro del usuario. Incluyendo: nombre (no puede estar vacío), edad (debe tener más de 17 años), peso (30-150 kg), clase (lista desplegable), contraseña de inicio de sesión (al menos 8 dígitos de largo), contraseña de confirmación (igual que la contraseña de inicio de sesión), correo electrónico (no se puede vaciar), número de teléfono, QQ, currículum y otra información. Y crear verificaciones correspondientes para los elementos de estas tablas. Si se detecta un error, se mostrará un error en palabras rojas después del cuadro de entrada. Debe usar el texto de entrada de texto de texto de una sola línea, el cuadro de lista desplegable Seleccionar, contraseña de contraseña de contraseña y cuadro de entrada de texto de múltiples líneas TextARea aprendida en las secciones anteriores. Este es un formulario de registro de usuario más práctico.
registrar.html:
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<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>
</ablo>
<!-return validate () y validate () se trata de si el formulario está borrado->
<Body onload = "load_greeting ()">
<Form ID = "Test" Align = "Left" onSubMit = "return Validate ()">
<Table>
<tr>
<TD> Nombre*: </td>
<td> <input type = "text" name = "name" id = "name" size = "20" onchange = 'check ("name")'> </td>
<td id = "namecheck" hidden = "true">*El nombre no puede estar vacío </td>
</tr>
<tr>
<TD> Age: </td>
<td> <input type = "text" name = "edad" id = "edad" size = "20" onchange = 'check ("edad")'> </td>
<td id = "agecheck" hidden = "true">*La edad no puede tener menos de 17 años </td>
</tr>
<tr>
<td> peso: </td>
<TD> <input type = "text" name = "weight" id = "weight" size = "20" onchange = 'check ("peso")'> </td>
<td id = "weightcheck" hidden = "true">*El rango de peso es 30 ~ 150 kg </td>
</tr>
<tr>
<td> clase: </td>
<td> <select id = "class" name = "class">
<Cection> class0 </opción>
<Cection> class1 </opción>
<Cection> class2 </opción>
<Cection> class3 </opción>
</select>
</td>
</tr>
<tr>
<TD> contraseña*: </td>
<TD> <input type = "contraseña" name = "contraseña" id = "contraseña" size = "20" onchange = 'check ("contraseña")'> </td>
<TD id = "PasswordCheck" Hidden = "True">*Longitud de contraseña menos de 8 </td>
</tr>
<tr>
<TD> Confirmar contraseña*: </td>
<TD> <input type = "Password" name = "CPassword" id = "CPassword" size = "20" onChange = 'check ("cpassword")'> </td>
<td id = "cpasswordcheck" hidden = "true">*dos passwd no es el mismo </td>
</tr>
<tr>
<TD> correo electrónico*: </td>
<TD> <input type = "correo electrónico" name = "correo electrónico" id = "correo electrónico" size = "20" onchange = 'check (this.id)'> </td>
<td id = "correo electrónico check" hidden = "true">*¡El nombre de correo electrónico es 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> Información personal: </td>
<TD> <Textarea sows = "10" cols = "19"> </extarea> </td>
</tr>
<tr>
<td colspan = "3">
<input type = "enviar" name = "enviar">
<input type = "reset" name = "reset">
</td>
</tr>
</table>
</form>
</body>
</html>
check.css:
La copia del código es la siguiente:
td.eck {
Color:#C00;
Font-Weight: Bold;
}
load.js:
La copia del código es la siguiente:
Comprobación de funciones (STR)
{
var x = document.getElementById (str);
var y = document.getElementById (str+"check");
// alerta ("¡Compruebe!");
if (str == "nombre")
{
if (x.value == "")
y.hidden = false;
demás
y.hidden = verdadero;
}
else if (str == "edad")
{
if (isnan (x.value) || x.value <17)
y.hidden = false;
demás
y.hidden = verdadero;
}
else if (str == "peso")
{
x = x.value;
if (isnan (x) || x <30 || x> 150)
y.hidden = false;
demás
y.hidden = verdadero;
}
else if (str == "contraseña")
{
x = x.value.length;
if (x <8)
{
y.hidden = false;
// alerta ("¡Compruebe!");
}
demás
y.hidden = verdadero;
}
else if (str == "cpassword")
{
var z = document.getElementById ("contraseña"). valor;
x = x.value;
if (x! = z)
y.hidden = false;
demás
y.hidden = verdadero;
}
else if (str == "correo electrónico")
{
x = x.value.indexof ("@")
if (x == -1)
y.hidden = false;
demás
y.hidden = verdadero;
}
regresar y.hidden;
}
function validate ()
{
var arr = ["nombre", "edad", "peso", "contraseña", "cpassword", "correo electrónico"];
var i = 0;
submitok = true;
mientras (i <= 5)
{
if (! check (arr [i]))
{
alerta (arr [i]+"incorrecto!");
submitok = false;
romper;
}
i ++;
}
if (Submitok)
{
alerta ("¡Envíe exitoso!");
devolver verdadero;
}
demás
{
alerta ("Presentación fallida");
devolver falso;
}
}
función load_greeting ()
{
// alerta ("Visitar /n");
}