Desenvolva uma página HTML registrada para coletar informações de registro do usuário. Incluindo: nome (não pode estar vazio), idade (deve ter mais de 17 anos), peso (30-150 kg), classe (lista suspensa), senha de login (pelo menos 8 dígitos), senha de confirmação (o mesmo que a senha de login), email (não pode estar vazio), número de telefone, QQ, currículo e outras informações. E crie verificações correspondentes para os elementos dessas tabelas. Se um erro for detectado, um erro será exibido em palavras vermelhas após a caixa de entrada. Você deve usar o texto da caixa de entrada de texto de linha única, a caixa de listagem suspensa Selecionar, a senha da caixa de entrada de senha e a caixa de entrada de texto de várias linhas Textária aprendidas nas seções anteriores. Este é um formulário de registro de usuário mais prático.
Register.html:
A cópia do código é a seguinte:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> Experimento 2 </ititle>
<link href = "check.css" rel = "Stylesheet" type = "text/css">
<script type = "text/javascript" src = "load.js">
</script>
</head>
<!-Return validate () e validate () são sobre se o formulário está limpo->
<corpo onload = "load_greeting ()">
<form id = "test" align = "esquerda" onsubMit = "return validate ()">
<tabela>
<tr>
<Td> Nome*: </td>
<td> <input type = "text" name = "name" id = "name" size = "20" onchange = 'check ("name")'> </td>
<td id = "namecheck" hidden = "true">*nome não pode estar vazio </td>
</tr>
<tr>
<td> Idade: </td>
<td> <input type = "text" name = "idade" id = "idade" size = "20" onchange = 'check ("idade")'> </td>
<td id = "agecheck" hidden = "true">*idade não pode ter menos de 17 anos </td>
</tr>
<tr>
<Td> Peso: </td>
<Td> <input type = "text" name = "peso" id = "peso" size = "20" onchange = 'check ("peso")'> </td>
<td id = "weightcheck" hidden = "true">*A faixa de peso é de 30 ~ 150kg </td>
</tr>
<tr>
<td> classe: </td>
<Td> <select id = "class" name = "class">
<pution> classe0 </pption>
<pution> classe1 </pption>
<pution> classe2 </pption>
<pution> classe3 </pption>
</leclect>
</td>
</tr>
<tr>
<td> senha*: </td>
<Td> <input type = "senha" name = "senha" id = "senha" size = "20" onchange = 'check ("senha")'> </td>
<TD ID = "PasswordCheck" Hidden = "True">*Comprimento da senha menor que 8 </td>
</tr>
<tr>
<Td> Confirmar senha*: </td>
<td> <input type = "senha" name = "cpassword" id = "cpassword" size = "20" onchange = 'check ("cpassword")'> </td>
<td id = "cpasswordcheck" hidden = "true">*dois passwd não é o mesmo </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">*o nome de email é 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> Informações pessoais: </td>
<Td> <textário linhas = "10" cols = "19"> </sexttarea> </td>
</tr>
<tr>
<td colspan = "3">
<input type = "submite" name = "submit">
<input type = "reset" name = "reset">
</td>
</tr>
</tabela>
</morm>
</body>
</html>
check.css:
A cópia do código é a seguinte:
td.check {
Cor:#C00;
Peso da fonte: negrito;
}
load.js:
A cópia do código é a seguinte:
Verificação da função (STR)
{
var x = document.getElementById (str);
var y = document.getElementById (str+"check");
// alert ("check!");
if (str == "nome")
{
if (x.value == "")
y.hidden = false;
outro
y.hidden = true;
}
senão se (str == "idade")
{
if (isnan (x.value) || x.value <17)
y.hidden = false;
outro
y.hidden = true;
}
caso contrário, se (str == "peso")
{
x = x.value;
if (isnan (x) || x <30 || x> 150)
y.hidden = false;
outro
y.hidden = true;
}
caso contrário, se (str == "senha")
{
x = x.value.length;
se (x <8)
{
y.hidden = false;
// alert ("check!");
}
outro
y.hidden = true;
}
caso contrário, se (str == "cpassword")
{
var z = document.getElementById ("senha").
x = x.value;
if (x! = z)
y.hidden = false;
outro
y.hidden = true;
}
caso contrário, se (str == "email")
{
x = x.value.indexOf ("@")
if (x == -1)
y.hidden = false;
outro
y.hidden = true;
}
retornar y.hidden;
}
função validate ()
{
var arr = ["nome", "idade", "peso", "senha", "cpassword", "email"];
var i = 0;
submitok = true;
enquanto (i <= 5)
{
if (! check (arr [i]))
{
alerta (arr [i]+"errado!");
submitok = false;
quebrar;
}
i ++;
}
if (submitok)
{
alerta ("Envie bem -sucedido!");
retornar true;
}
outro
{
alerta ("falha no submissão");
retornar falso;
}
}
função load_greeting ()
{
// alert ("visit /n");
}