開發一個注冊的HTML頁面， 用于搜集用戶的注冊信息。包括： 姓名（不能為空）， 年齡（必須超過17歲）， 體重（30-150kg）， 班級（下拉列表），登陸密碼（至少8位長）、確認密碼（和登錄密碼一致），Email(不能為空) , 電話，QQ， 個人簡歷等信息。 并針對這些表的元素來創建相應的驗證，如果檢測到錯誤， 在輸入框后面用紅色的字顯示錯誤。要用到前面幾節學習過的單行文本輸入框text、下拉列表框select、密碼輸入框password、多行文本輸入框textarea。這是一個較實用的用戶注冊表單.。
register.html:
復制代碼 代碼如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>實驗2</title>
<link href="check.css" type="text/css">
<script type="text/javascript" src="load.js">
</script>
</head>
<!--return validate()和validate()在于是否清空表單-->
<body>
<form onSubmit="return validate()">
<table>
<tr>
<td>Name*:</td>
<td><input type="text" size="20" onChange='check("name")'></td>
<td hidden="true">*姓名不能為空</td>
</tr>
<tr>
<td>Age:</td>
<td><input type="text" size="20" onChange='check("age")'></td>
<td hidden="true">*年齡不能小于17歲</td>
</tr>
<tr >
<td>weight:</td>
<td><input type="text" size="20" onChange='check("weight")'></td>
<td hidden="true">*體重范圍為30~150KG</td>
</tr>
<tr>
<td>Class:</td>
<td><select>
<option>class0</option>
<option>class1</option>
<option>class2</option>
<option>class3</option>
</select>
</td>
</tr>
<tr>
<td>Password*:</td>
<td><input type="password" size="20" onChange='check("password")'></td>
<td hidden="true">*password length less than 8</td>
</tr>
<tr>
<td>Confirm Password*:</td>
<td><input type="password" size="20" onChange='check("cpassword")'></td>
<td hidden="true">*Two passwd is not same</td>
</tr>
<tr >
<td>Email*:</td>
<td><input type="email" size="20" onChange='check(this.id)'></td>
<td hidden="true">*電子郵件名非法！</td>
</tr>
<tr>
<td>TEL:</td>
<td><input type="text" size="20"></td>
</tr>
<tr>
<td>QQ:</td>
<td><input type="text" size="20"></td>
</tr>
<tr>
<td>Personal Information:</td>
<td><textarea rows="10" cols="19"></textarea></td>
</tr>
<tr>
<td colspan="3">
<input type="submit">
<input type="reset">
</td>
</tr>
</table>
</form>
</body>
</html>
復制代碼 代碼如下:
td.check{
color:#C00;
font-weight:bold;
}
復制代碼 代碼如下:
function check(str)
{
var x = document.getElementById(str);
var y = document.getElementById(str+"Check");
//alert("check!");
if(str=="name")
{
if(x.value=="")
y.hidden = false;
else
y.hidden = true;
}
else if(str=="age")
{
if(isNaN(x.value) || x.value < 17)
y.hidden = false;
else
y.hidden = true;
}
else if(str=="weight")
{
x = x.value;
if(isNaN(x) || x < 30 || x > 150)
y.hidden = false;
else
y.hidden = true;
}
else if(str=="password")
{
x = x.value.length;
if(x < 8)
{
y.hidden = false;
//alert("check!");
}
else
y.hidden = true;
}
else if(str=="cpassword")
{
var z = document.getElementById("password").value;
x = x.value;
if(x != z)
y.hidden = false;
else
y.hidden = true;
}
else if(str=="email")
{
x = x.value.indexOf("@")
if(x == -1)
y.hidden = false;
else
y.hidden = true;
}
return y.hidden;
}
function validate()
{
var arr=["name", "age", "weight", "password", "cpassword", "email"];
var i = 0;
submitOK = true;
while(i <= 5)
{
if(!check(arr[i]))
{
alert(arr[i]+" wrong!");
submitOK = false;
break;
}
i++;
}
if(submitOK)
{
alert("提交成功！");
return true;
}
else
{
alert("提交失敗");
return false;
}
}
function load_greeting()
{
//alert("visit /n");
}
新聞熱點
疑難解答
圖片精選
