登録されたHTMLページを開発して、ユーザー登録情報を収集します。を含む：名前（空ではない）、年齢（17歳以上）、重量（30-150kg）、クラス（ドロップダウンリスト）、ログインパスワード（少なくとも8桁の長さ）、確認パスワード（ログインパスワードと同じ）、電子メール（空はできない）、電話番号、QQ、履歴書、その他の情報。これらのテーブルの要素に対応する検証を作成します。エラーが検出された場合、入力ボックスの後にエラーが赤い単語で表示されます。シングルラインテキスト入力ボックステキスト、ドロップダウンリストボックスの選択、パスワード入力ボックスパスワード、および前のセクションで学習したマルチラインテキスト入力ボックステキストを使用する必要があります。これは、より実用的なユーザー登録フォームです。
Register.html：
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<メタ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> name*：</td>
<td> <入力タイプ= "text" name = "name" id = "name" size = "20" onchange = 'check（ "name"）'> </td>
<td id = "namecheck" hidden = "true">*名前は空になりません</td>
</tr>
<tr>
<TD>年齢：</td>
<td> <入力タイプ= "text" name = "age" id = "age" size = "20" onchange = 'check（ "age"）'> </td>
<td id = "agecheck" hidden = "true">*年齢は17歳未満ではありません</td>
</tr>
<tr>
<td>重量：</td>
<td> <入力タイプ= "text" name = "weight" id = "weight" size = "20" onchange = 'check（ "weight"）'> </td>
<td id = "weightcheck" hidden = "true">*重量範囲は30〜150kg </td>です
</tr>
<tr>
<td>クラス：</td>
<td> <id = "class" name = "class">を選択します
<オプション> class0 </option>
<オプション> class1 </option>
<オプション> class2 </option>
<オプション> class3 </option>
</select>
</td>
</tr>
<tr>
<td>パスワード*：</td>
<td> <入力タイプ= "パスワード" name = "password" id = "password" size = "20" onchange = 'check（ "password"）'> </td>
<td id = "passwordcheck" hidden = "true">*パスワード長は8 </td>
</tr>
<tr>
<td>パスワードの確認*：</td>
<td> <入力タイプ= "パスワード" name = "cpassword" id = "cpassword" size = "20" onchange = 'check（ "cpassword"）'> </td>
<td id = "cpasswordcheck" hidden = "true">*2つのpasswdは同じではありません</td>
</tr>
<tr>
<td>メール*：</td>
<td> <入力タイプ= "email" name = "email" id = "email" size = "20" onchange = 'check（this.id）'> </td>
<td id = "emailcheck" hidden = "true">*メール名は違法です！ </td>
</tr>
<tr>
<td> tel：</td>
<td> <入力タイプ= "text" name = "tel" id = "tel" size = "20"> </td>
</tr>
<tr>
<td> qq：</td>
<td> <入力タイプ= "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">
<入力型= "submit" name = "submit">
<入力型= "reset" name = "reset">
</td>
</tr>
</table>
</form>
</body>
</html>
check.css：
コードコピーは次のとおりです。
td.check {
色：＃c00;
font-weight：bold;
}
load.js：
コードコピーは次のとおりです。
機能チェック（STR）
{
var x = document.getElementById（str）;
var y = document.getElementById（str+"check"）;
// alert（ "check！"）;
if（str == "name"）
{
if（x.value == ""）
y.hidden = false;
それ以外
y.hidden = true;
}
else if（str == "age"）
{
if（isnan（x.value）|| x.Value <17）
y.hidden = false;
それ以外
y.hidden = true;
}
else if（str == "weight"）
{
x = x.value;
if（isnan（x）|| x <30 || x> 150）
y.hidden = false;
それ以外
y.hidden = true;
}
else if（str == "password"）
{
x = x.value.length;
if（x <8）
{
y.hidden = false;
// alert（ "check！"）;
}
それ以外
y.hidden = true;
}
else if（str == "cpassword"）
{
var z = document.getElementById（ "Password"）。value;
x = x.value;
if（x！= z）
y.hidden = false;
それ以外
y.hidden = true;
}
else if（str == "email"）
{
x = x.value.indexof（ "@"）
if（x == -1）
y.hidden = false;
それ以外
y.hidden = true;
}
y.hiddenを返します。
}
function validate（）
{
var arr = ["name"、 "age"、 "weight"、 "password"、 "cpassword"、 "email"];
var i = 0;
submitok = true;
while（i <= 5）
{
if（！check（arr [i]））
{
アラート（arr [i]+"誤り！"）;
submitok = false;
壊す;
}
i ++;
}
if（submingok）
{
アラート（「成功！」を送信！ "）;
trueを返します。
}
それ以外
{
アラート（ "提出失敗"）;
falseを返します。
}
}
関数load_greeting（）
{
// alert（ "visit /n"）;
}