这篇文章主要介绍了HTML界面登录时的JS验证方法,需要的朋友可以参考下
开发一个注册的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" 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()">
<table>
<tr>
<td>Name*:</td>
<td><input type="text" name="Name" id="name" size="20" onChange='check("name")'></td>
<td id="nameCheck" class="check" hidden="true">*姓名不能为空</td>
</tr>
<tr>
<td>Age:</td>
<td><input type="text" name="Age" id="age" size="20" onChange='check("age")'></td>
<td id="ageCheck" class="check" hidden="true">*年龄不能小于17岁</td>
</tr>
<tr >
<td>weight:</td>
<td><input type="text" name="weight" id="weight" size="20" onChange='check("weight")'></td>
<td id="weightCheck" class="check" hidden="true">*体重范围为30~150KG</td>
</tr>
<tr>
<td>Class:</td>
<td><select id="class" name="class">
<option>class0</option>
<option>class1</option>
<option>class2</option>
<option>class3</option>
</select>
</td>
</tr>
<tr>
<td>Password*:</td>
<td><input type="password" name="Password" id="password" size="20" onChange='check("password")'></td>
<td id="passwordCheck" class="check" hidden="true">*password length less than 8</td>
</tr>
<tr>
<td>Confirm Password*:</td>
<td><input type="password" name="cpassword" id="cpassword" size="20" onChange='check("cpassword")'></td>
<td id="cpasswordCheck" class="check" hidden="true">*Two passwd is not same</td>
</tr>
<tr >
<td>Email*:</td>
<td><input type="email" name="email" id="email" size="20" onChange='check(this.id)'></td>
<td id="emailCheck" class="check" hidden="true">*电子邮件名非法!</td>
</tr>
<tr>
<td>TEL:</td>
<td><input type="text" name="TEL" id="TEL" size="20"></td>
</tr>
<tr>
<td>QQ:</td>
<td><input type="text" name="QQ" id="QQ" 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" name="submit">
<input type="reset" name="reset">
</td>
</tr>
</table>
</form>
</body>
</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");
}
最新资讯
回力棒效应:从黑洞逃逸的光线会再次被拉回黑洞

回力棒效应:从黑洞逃逸

几十年以来,科学家一直怀疑从黑洞周围逃逸的光线会像回
一颗流浪恒星能将地球踢出太阳系吗?

一颗流浪恒星能将地球

宇宙环境是非常危险的,任何行星潜在的生命都将面临无处
首个1000万粉UP主诞生,对B站来说意味着什么?|观潮

首个1000万粉UP主诞生

B站的发展速度有目共睹,老番茄是第一个,未来必然会出现
疫情期Zoom成当红炸子鸡 李嘉诚早期投资已翻数十倍

疫情期Zoom成当红炸子

李嘉诚过去通过在房地产和基础设施建设领域的投资构建
喜茶会成为下一个瑞幸吗?仍有商业逻辑问题待解

喜茶会成为下一个瑞幸

目前看来,喜茶具备了一个连锁餐饮品牌健康发展的基本商
瑞幸咖啡造假后,无论哪个中国公司看起来都像骗子

瑞幸咖啡造假后,无论哪

从瑞幸咖啡到跟谁学再到爱奇艺,不管在海外上市的中国公
最新文章
Vue实现图片与文字混输效果

Vue实现图片与文字混

用多了 JQuery ,习惯了使用JQuery的API操作 DOM ,几乎忘
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

Vue实现点击当前元素

这篇文章主要介绍了Vue实现点击当前元素以外的地方隐
Vue实现验证码功能

Vue实现验证码功能

这篇文章主要为大家详细介绍了Vue实现验证码功能,文中
JS实现的雪花飘落特效示例

JS实现的雪花飘落特效

这篇文章主要介绍了JS实现的雪花飘落特效,结合实例形
微信小程序实现图片压缩

微信小程序实现图片压

这篇文章主要为大家详细介绍了微信小程序实现图片压缩
JavaScript实现京东放大镜效果

JavaScript实现京东放

这篇文章主要为大家详细介绍了JavaScript实现京东放大