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 相关文章推荐
让FireFox支持innerText的实现代码
Dec 01 Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
Jan 28 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 Javascript
jquery+正则实现统一的表单验证
Sep 20 Javascript
javascript中的3种继承实现方法
Jan 27 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
js在HTML的三种引用方式详解
Aug 29 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字符串函数的总结分析
2013/06/05 PHP
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
destoon实现调用图文新闻的方法
2014/08/21 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
Vue实现简单分页器
2018/12/29 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
Python中os.path用法分析
2015/01/15 Python
使用Python绘制图表大全总结
2017/02/11 Python
十分钟搞定pandas(入门教程)
2019/06/21 Python
Python3使用xml.dom.minidom和xml.etree模块儿解析xml文件封装函数的方法
2019/09/23 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
python文件及目录操作代码汇总
2020/07/08 Python
python中Pexpect的工作流程实例讲解
2021/03/02 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
工程资料员岗位职责
2014/03/10 职场文书
党员干部承诺书
2014/03/25 职场文书
书香家庭事迹材料
2014/05/09 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
医院标语大全
2014/06/23 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
解读Vue组件注册方式
2021/05/15 Vue.js
前端JavaScript大管家 package.json
2021/11/02 Javascript