Разработайте зарегистрированную HTML -страницу для сбора информации о регистрации пользователей. Включая: имя (не может быть пустым), возраст (должен быть более 17 лет), вес (30-150 кг), класс (раскрывающийся список), пароль для входа (не менее 8 цифр длиной), пароль подтверждения (так же, как пароль для входа), электронная почта (не может быть пустым), номер телефона, QQ, резюме и другая информация. И создать соответствующие проверки для элементов этих таблиц. Если обнаружена ошибка, после ввода будет отображаться ошибка в красных словах. Вам следует использовать однострочный текст текста ввода ввода, выберите «Выбрать раскрывающееся списки», «Пароль ввода пароля» и многострочный текстовый ввод Textarea, изученный в предыдущих разделах. Это более практичная форма регистрации пользователя.
Register.html:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<meta charset = "utf-8">
<title> Эксперимент 2 </title>
<link href = "check.css" rel = "styleSheet" type = "text/css">
<script type = "text/javascript" src = "load.js">
</script>
</head>
<!-return validate () и validate () о том, очищена ли форма->
<body Onload = "load_greeting ()">
<form id = "test" align = "Left" onsubmit = "return validate ()">
<Таблица>
<tr>
<TD> Имя*: </TD>
<td> <input type = "text" name = "name" id = "name" size = "20" onchange = 'check ("name")'> </td>
<td id = "namecheck" hidden = "true">*Имя не может быть пустым </td>
</tr>
<tr>
<TD> Возраст: </td>
<td> <input type = "text" name = "age" id = "age" size = "20" onchange = 'check ("age")'> </td>
<td id = "agecheck" hidden = "true">*Возраст не может быть менее 17 лет </td>
</tr>
<tr>
<TD> Вес: </TD>
<td> <input type = "text" name = "вес" id = "вес" size = "20" onchange = 'check ("вес")'> </td>
<td id = "wewscheck" hidden = "true">*диапазон веса 30 ~ 150 кг </td>
</tr>
<tr>
<TD> класс: </td>
<td> <select id = "class" name = "class">
<опция> class0 </option>
<Опция> Класс1 </option>
<опция> class2 </option>
<Опция> Класс3 </option>
</select>
</td>
</tr>
<tr>
<TD> пароль*: </td>
<td> <input type = "password" name = "password" id = "password" size = "20" onchange = 'check ("пароль")'> </td>
<td id = "passwordcheck" hidden = "true">*Длина пароля менее 8 </td>
</tr>
<tr>
<TD> Подтвердите пароль*: </td>
<td> <input type = "password" name = "cpassword" id = "cpassword" size = "20" onchange = 'check ("cpassword")'> </td>
<td id = "cpasswordcheck" hidden = "true">*Два паса не одинаково </td>
</tr>
<tr>
<TD> Электронная почта*: </td>
<td> <input type = "email" name = "email" id = "email" size = "20" onchange = 'check (this.id)'> </td>
<td id = "emailcheck" hidden = "true">*Имя электронной почты незаконно! </td>
</tr>
<tr>
<TD> Тел: </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> Личная информация: </td>
<td> <textarea Rows = "10" Cols = "19"> </textarea> </td>
</tr>
<tr>
<td colspan = "3">
<input type = "Отправить" name = "Отправить">
<input type = "сбросить" name = "сбросить">
</td>
</tr>
</table>
</form>
</body>
</html>
check.css:
Кода -копия выглядит следующим образом:
Td.Check {
Цвет:#C00;
шрифт-вес: жирный шрифт;
}
Load.js:
Кода -копия выглядит следующим образом:
Проверка функции (STR)
{
var x = document.getElementbyId (str);
var y = document.getElementbyId (str+"check");
// alert ("Проверка!");
if (str == "имя")
{
if (x.value == "")
y.hidden = false;
еще
y.hidden = true;
}
иначе if (str == "возраст")
{
if (isnan (x.value) || x.value <17)
y.hidden = false;
еще
y.hidden = true;
}
иначе if (str == "вес")
{
x = x.value;
if (isnan (x) || x <30 || x> 150)
y.hidden = false;
еще
y.hidden = true;
}
иначе if (str == "пароль")
{
x = x.value.length;
if (x <8)
{
y.hidden = false;
// alert ("Проверка!");
}
еще
y.hidden = true;
}
иначе if (str == "cpassword")
{
var z = document.getElementById ("пароль"). Value;
x = x.value;
if (x! = z)
y.hidden = false;
еще
y.hidden = true;
}
иначе if (str == "электронная почта")
{
x = x.value.indexof ("@")
if (x == -1)
y.hidden = false;
еще
y.hidden = true;
}
вернуть y.hidden;
}
Функция validate ()
{
var arr = ["name", "age", "вес", "пароль", "cpassword", "электронная почта"];
var i = 0;
отправить = true;
пока (я <= 5)
{
if (! Проверьте (arr [i]))
{
оповещение (arr [i]+"неправильно!");
отправить = false;
перерыв;
}
i ++;
}
if (отправить)
{
оповещение («Отправить успешно!»);
вернуть истину;
}
еще
{
оповещение («подчинение не удалось»);
вернуть ложь;
}
}
function load_greeting ()
{
// alert ("Visit /n");
}