HTML页面登录时的JS验证方法


Posted in Javascript onMay 28, 2014

开发一个注册的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"); 
}
Javascript 相关文章推荐
原生js实现移动端瀑布流式代码示例
Dec 18 Javascript
简单讲解AngularJS的Routing路由的定义与使用
Mar 05 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
ES6教程之for循环和Map,Set用法分析
Apr 10 Javascript
Angular 1.x个人使用的经验小结
Jul 19 Javascript
详解如何让Express支持async/await
Oct 09 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
Angularjs实现多图片上传预览功能
Jul 18 Javascript
js调用设备摄像头的方法
Jul 19 Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 Javascript
原生JS实现动态添加新元素、删除元素方法
May 05 Javascript
js仿京东放大镜效果
Aug 09 Javascript
22点关于jquery性能优化的建议
May 28 #Javascript
一个奇葩的最短的 IE 版本判断JS脚本
May 28 #Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
May 28 #Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 #Javascript
node.js Web应用框架Express入门指南
May 28 #Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
May 28 #Javascript
浅析JavaScript基本类型与引用类型
May 28 #Javascript
You might like
PHP 将图片按创建时间进行分类存储的实现代码
2010/01/05 PHP
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
PHP中输出转义JavaScript代码的实现代码
2011/04/22 PHP
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
jquery的Tooltip插件 qtip使用详细说明
2010/09/08 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
jQuery实现预加载图片的方法
2015/03/17 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
vue中轮训器的使用
2019/01/27 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
2019/06/03 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
分享Angular http interceptors 拦截器使用(推荐)
2019/11/10 Javascript
Vue实现点击导航栏当前标签后变色功能
2020/08/19 Javascript
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
让Python代码更快运行的5种方法
2015/06/21 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
python之Flask实现简单登录功能的示例代码
2018/12/24 Python
Python实现插入排序和选择排序的方法
2019/05/12 Python
通过实例解析Python调用json模块
2019/12/11 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
文明风采获奖感言
2014/02/18 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
创业计划书之养殖业
2019/10/11 职场文书
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server