java入门-验证码 今天查到的一个简单随机生成4位数字的验证码-jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<title>简单验证</title>
<script>
function yzm(){
var Num="";
for(var i=0;i<4;i++)
{
Num+=Math.floor(Math.random()*10);
}
document.getElementById("yzphoto").value=Num;
document.getElementById("yzm").value=Num;
}
function userLogin(){
var userName = document.getElementById("userName").value;
var password = document.getElementById("password").value;
var yztext = document.getElementById("yztext").value;
var yzm = document.getElementById("yzm").value;
if(userName != "admin"){
alert("用户名错误");
}else if(password != "admin"){
alert("密码错误");
}else if(yztext != yzm){
alert("验证码错误");
}else{
alert("登陆成功");
}
location.reload();
}
</script>
</head>
<body onLoad="yzm()">
<div style="width:100%;text-align:center">
<h1>用户登录</h1>
<table>
<tr>
<td>用户名:</td>
<td><input id="userName" type="text" value=""/></td>
</tr>
<tr>
<td>密码:</td>
<td><input id="password" type="password" value=""/></td>
<tr>
<tr><td>
验证码:
</td>
<td><input id="yztext" type="text" value=""/><input style="width:50px;background-
color:red;color:blue" type="text" id="yzphoto" value=""/><input type="hidden" id="yzm"
value=""></td></tr>
<tr>
<td colspan="2" align="center"><input onclick="userLogin()" type="button" value="登陆"/></td>
</tr>
</table>
</div>
</body>
</html>

 当用户验证码输入错误时

 当用户输入验证码正确时

 此仅为本人刚刚接触java时的随身记录的样式 

 不能作为主要参考

猜你喜欢

转载自www.cnblogs.com/lyc6666/p/11503743.html