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:

复制代码 代码如下:

td.check{
color:#C00;
font-weight:bold;
}

load.js:

复制代码 代码如下:

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 y.hidden = false;
else
y.hidden = true;
}
else if(str=="weight")
{
x = x.value;
if(isNaN(x) || x 150)
y.hidden = false;
else
y.hidden = true;
}
else if(str=="password")
{
x = x.value.length;
if(x {
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 {
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");
}