JavaScript 最佳表单验证
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>注册会员</title>
<style type="text/css">
.table {
border-collapse:collapse;
font-size:12px;
}
.input {
width:200px;
height:22px;
}
.stats1 {
color:#aaa;
}
.stats2 {
color:#000;
}
.stats3 {
color:red;
}
.stats4 {
color:green;
}
</style>
</head>
<body>
<form action="index.php" method="post" onSubmit="return regCheck('click')">
<table border="0" align="center" width="500" class="table">
<tr>
<td width="80" height="25" align="right">用户名称：</td><td><input type="text" name="username" value="" class="input" /> <span class="stats1"></span></td>
</tr>
<tr>
<td width="80" height="25" align="right">密码：</td><td><input type="password" name="password" value="" class="input" /> <span class="stats1"></span></td>
</tr>
<tr>
<td width="80" height="25" align="right">确认密码：</td><td><input type="password" name="repass" value="" class="input" /> <span class="stats1"></span></td>
</tr>
<tr>
<td width="80" height="25" align="right">电子邮箱：</td><td><input type="text" name="email" value="" class="input" /> <span class="stats1"></span></td>
</tr>
<tr>
<td height="30"></td><td align="left"><input type="submit" name="send" value="提交" /> <input type="reset" value="重置" /></td>
</tr>
</table>
</form>
</body>
</html>
<script language="javascript">
// 找到 input 后面的 SPAN 标签
function gspan(cobj){
while(true){
if(cobj.nextSibling.nodeName!="SPAN")
cobj=cobj.nextSibling;
else
return cobj.nextSibling;
}
}
function check(obj, info, fun, click){
var sp=gspan(obj);
obj.onfocus=function(){
sp.innerHTML=info;
sp.className="stats2";
}
obj.onblur=function(){
if(fun(this.value)){
sp.innerHTML="输入正确√";
sp.className="stats4";
}else{
sp.innerHTML=info;
sp.className="stats3";
}
}
if(click=="click")
obj.onblur();
}
//页面加载完自动调用
onload=regCheck
function regCheck(click){
var stat=true;
var username=document.getElementsByName("username")[0];
var password=document.getElementsByName("password")[0];
var repass=document.getElementsByName("repass")[0];
var email=document.getElementsByName("email")[0];
var other=document.getElementsByName("other")[0];
// 验证用户名
check(username, "用户名称为4-20位的英文字母或数字！", function(val){
if(val.match(/^\S+$/) && val.length >=4 && val.length <=20){
return true;
}else{
stat=false;
return false;
}
}, click);
// 验证密码
check(password, "用户密码必须在6-20位之间！", function(val){
if(val.match(/^\S+$/) && val.length >=6 && val.length <=20){
return true;
}else{
stat=false;
return false;
}
}, click);
// 验证确认密码
check(repass, "确定密码要和上面一致!", function(val){
if(val.match(/^\S+$/) && val.length >=6 && val.length <=20 && val==password.value){
return true;
}else{
stat=false;
return false;
}
}, click)
// 验证Email
check(email, "请输入正确格式的电子邮箱！", function(val){
if(val.match(/\w+@\w+\.\w/)){
return true;
}else{
stat=false;
return false;
}
}, click)
return stat;
}
</script>
摘自 Lee.的专栏
相关新闻>>
- Javascript 兼容 IE6、IE7、FF 的“加入收藏”“设为首页”
- 好好学一遍JavaScript 笔记(一)——基础中的基础
- 好好学一遍JavaScript 笔记(二)——encode、数组、对象创建
- 好好学一遍JavaScript 笔记(三)——StringBuffer、prototype
- 好好学一遍javaScript 笔记(四)——Attribute、HTML元素、文档碎
- 好好学一遍JavaScript 笔记(五)——正则表达式基础
- 好好学一遍JavaScript 笔记(六)——正则表达式基础二
- 好好学一遍JavaScript 笔记(七)——RegExp对象与常用正则
- 好好学一遍JavaScript 笔记(八)——冒泡型事件、捕获型事件
- JavaScript详解
- 发表评论
-
- 最新评论 更多>>
