这篇文章主要介绍了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");
}
最新资讯
周鸿祎再谈创业:风口和趋势都是正确的废话 对创业者没意义

周鸿祎再谈创业:风口和

360董事长兼CEO周鸿祎今日在天津市“海河英才”创业大
对话柔宇CEO刘自鸿:折叠屏定价降到五六千元一定有机会

对话柔宇CEO刘自鸿:折

不久前,柔宇科技发布了自己第二款折叠屏手机——FlexPa
消息称京东健康已向港交所提交上市申请

消息称京东健康已向港

京东健康已向港交所提交上市申请。
报告:被欧盟罚款27亿美元后 谷歌Shopping仍在垄断

报告:被欧盟罚款27亿美

研究机构Lademann & Associates进行的一项调查结果显
蔚来汽车将签署6亿美元协议 以认购蔚来(安徽)控股公司新增注资

蔚来汽车将签署6亿美

蔚来汽车将签署价值6亿美元的协议,以认购蔚来(安徽)控
第四范式总裁裴沵思:零售企业的智能化改造只做前端是不够的

第四范式总裁裴沵思:零

裴沵思透露,在疫情早期的时候,第四范式为最大的客户之一
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,