发布于 2017-01-27 13:26:59 | 44 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


这篇文章主要介绍了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"); 
} 


相关阅读 :
HTML页面登录时的JS验证方法
浏览器页面区域大小的js获取方法
HTML页面滚动时获取离页面顶部的距离2种实现方法
非常实用的js验证框架实现源码 附原理方法
js实现页面跳转的几种方法小结
js 控制页面跳转的5种方法
真正好用的js验证上传文件大小的简单方法
iphone、ipod Touch、ipad触屏时的js事件
常用的js验证和数据处理总结
几种经典排序算法的JS实现方法
常用的JS验证和函数汇总
如何调试异步加载页面里包含的js文件
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务