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 相关文章推荐
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
JS中动态添加事件(绑定事件)的代码
Jan 09 Javascript
jquery 卷帘效果实现代码(不同方向)
Feb 05 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
Feb 25 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
jQuery自定义数值抽奖活动代码
Jun 11 Javascript
jQuery实现打开页面渐现效果示例
Jul 27 Javascript
JavaScript实现弹窗效果代码分析
Mar 09 Javascript
js实现一个简单的数字时钟效果
Mar 29 Javascript
Vue通过input筛选数据
Oct 26 Javascript
Angularjs中使用轮播图指令swiper
May 30 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服务器页面间跳转实现方法
2012/08/02 PHP
php魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
php单例模式示例分享
2015/02/12 PHP
HTML中嵌入PHP的简单方法
2016/02/16 PHP
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
2010/07/13 Javascript
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
javascript实现超炫的向上滑行菜单实例
2015/08/03 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
2015/10/30 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
JavaScript如何判断input数据类型
2020/02/06 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
python编写爬虫小程序
2015/05/14 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
Python爬虫之Selenium多窗口切换的实现
2020/12/04 Python
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
欧洲最古老的鞋厂:Peter Kaiser
2019/11/05 全球购物
法学专业本科生自荐信范文
2013/12/17 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
2014年党建工作汇报材料
2014/10/27 职场文书
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
nginx安装以及配置的详细过程记录
2021/09/15 Servers
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python