这篇文章主要介绍了HTML界面登录时的JS验证方法,需要的朋友可以参考下
开发一个注册的HTML页面， 用于搜集用户的注册信息。包括： 姓名（不能为空）， 年龄（必须超过17岁）， 体重（30-150kg）， 班级（下拉列表），登陆密码（至少8位长）、确认密码（和登录密码一致），Email(不能为空) , 电话，QQ， 个人简历等信息。 并针对这些表的元素来创建相应的验证，如果检测到错误， 在输入框后面用红色的字显示错误。要用到前面几节学习过的单行文本输入框text、下拉列表框select、密码输入框password、多行文本输入框textarea。这是一个较实用的用户注册表单.。
register.html:
实验2
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 <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");
}
register.html:
复制代码 代码如下:
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 <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");
}
以上就是HTML页面登录时的JS验证方法的详细内容，更多请关注0133技术站其它相关文章！
