功能-验证功能 <script type="text/javascript"></script>
<script type="text/javascript">
//产生随机字的内容
var str = "qwertyupasdfghjkzxcvbnmQWERTYUPASDFGHJKLZXCVBNM23456789";
function yz() {
//随机出4个0-字符串长度之间的数字 做为下标
//定义验证码
yzmStr="";
//循环产生(4个) substr截取
for(var i=1;i<=4;i++){
yzmStr+=str.substr(Math.round(Math.random()*(str.length-1)),1);
}
//把验证码赋值到页面 syzm为下文验证码标签的ID
//给span标签赋值
document.getElementById("syzm").innerHTML=yzmStr;
}
//$()功能,返回id
function $(id) {
return document.getElementById(id);
}
//验证功能
function login_yz() {
//验证 用户名 和 密码不能为空
//获取用户名
var uname = $("uname").value;
if(uname.length==0){
return false;
}
//获取密码
var upwd = $("upwd").value;
if(upwd.length==0){
return false;
}
//获取验证码:判断和电脑的验证码是否相等
var yzm = $("uyzm").value;
if(yzm!=yzmStr){
//清空输入的验证码
$("uyzm").value="";
//重新生成验证码
yz();
return false;
}
}
</script>
body部分
//onload加载事件
<body onload="yz()">
<div id="login">
<div id="top">
<div id="top_left">
//图片路径
<img src="images/login_03.gif" />
</div>
<div id="top_center"></div>
</div>
<div id="center">
<div id="center_left"></div>
<div id="center_middle">
//onsubmit return ture 可以跳转到 admin.jsp false :不可以
<form action="admin.jsp" onsubmit="return login_yz()">
<div id="user">
用 户 <input type="text" id="uname" name="textfield" />
</div>
<div id="password">
密 码 <input type="password" id="upwd" name="textfield2" />
</div>
<div id="yzm">
验证码 <input id="uyzm" style="width: 50px;" type="text" name="textfield3" />
<span id="syzm" onclick="yz()"></span>
</div>
<div id="btn">
<input type="submit" value="登录">
<input type="reset" value="清空">
</div>
</form>
</div>
<div id="center_right"></div>
</div>
<div id="down">
<div id="down_left">
<div id="inf">
<span class="inf_text">版本信息</span> <span class="copyright">管理信息系统
2008 v2.0</span>
</div>
</div>
<div id="down_center"></div>
</div>
</div>
</body>
以上两段代码是其项目的主体部分,还有其他代码,伙伴们需要结合自己的项目给出操作。代码很灵活,该简便的也简便了,也还有新的小点子,比如说用户填写验证码时,不用区分大小写也是可以的,让我们一起开动大脑,想一想吧!