HTML頁面登入時的JS驗證方法_javascript技巧

發展一個已註冊的HTML頁面， 用於蒐集使用者的註冊資訊。包括： 姓名（不能為空）， 年齡（必須超過17歲）， 體重（30-150kg）， 班級（下拉列表），登陸密碼（至少8位長）、確認密碼（和登錄密碼一致），Email(不能為空) , 電話，QQ， 個人履歷等資訊。 並針對這些表的元素來建立對應的驗證，如果偵測到錯誤， 在輸入框後面用紅色的字顯示錯誤。要用到前面幾節學習過的單行文字輸入框text、下拉列錶框select、密碼輸入框password、多行文字輸入框textarea。這是一個較實用的用戶註冊表單.。

register.html:

複製程式碼 程式碼如下:

Name*:
Age:
weight:
Class:	class0 class1 class2 class3
Password*:
Confirm Password*:
Email*:
TEL:
QQ:
Personal Information:

check.css:

複製代碼代碼如下：

代碼如下：


🎜>顏色：#C00;

字型粗細：粗體；
}

load.js: 複製程式碼

程式碼如下：


函數檢查(str)
{
var x = document.getElementById(str);
var y = document .getElementById(str "Check");
//alert("檢查！");
if(str=="name")
{
if(x.value=="" )
y.hidden = false;
否則
y.hidden = true;
}
else if(str=="age")
{
if(isNaN (x.value) || x.value y.hidden = false;
否則
y.hidden = true;
}
else if(str=="weight ")
{
x = x.value;
if(isNaN(x) || x 150)
y.hidden = false;
否則
y.hidden = true;
}
else if(str=="密碼")
{
x = x.value.length;
if(x {
y.hidden = false;
//alert("檢查！");
}
else
y.hidden = true;
}
else if (str=="cpassword")
{
var z = document.getElementById("password").value;
x = x.value;
if(x != z)
x = x.value;
if(x != z)
y.hidden = false;
否則
y.hidden = true;
}
else if(str=="email")
{
x = x.value. indexOf("@")
if(x == -1)
y.隱藏=假；
否則
y.hidden = true;
}
回傳y.hidden ;
}

function validate()
{
var arr=["姓名", "年齡", "體重", "密碼", "cpassword", "電子郵件" ];
var i = 0;
提交確定= true;
while(i {
if(!check(arr[i]))
{
alert(arr[i] " 錯誤！ ");
提交OK = false;
休息；
}
我;
}
if(提交OK)
{
alert("提交成功！ ");
回傳真;
}
else
{
alert("提交失敗");
回傳錯誤；
}
}

function load_greeting() { //alert("訪問n"); }