WEB登录页面加入简单验证码

最新推荐文章于 2024-04-10 23:31:30 发布

李广亮

最新推荐文章于 2024-04-10 23:31:30 发布

阅读量5.5k

点赞数 2

分类专栏： WEB 开发文章标签： web

本文链接：https://blog.csdn.net/LiGuangLiang_bzu/article/details/49641035

版权

WEB 开发专栏收录该内容

11 篇文章 1 订阅

订阅专栏

1.0 找了几张数字图片，在登录页面做了简单的验证码，如下图：

这里写图片描述

2.0 验证码正确，登录系统，否则返回登录页面

这里写图片描述

3.0 index.jsp：

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>    
    <title>登录页面</title>
    <script type="text/javascript">
        function loginCheck() {         

            if(loginForm.userName.value == "") {
                alert("用户名不能为空，请输入用户名！");
                loginForm.userName.focus();
                return false;
            }
            if(loginForm.userPassword.value == "") {
                alert("密码不能为空，请输入密码！");
                loginForm.userPassword.focus();
                return false;
            }
            if(loginForm.verification2.value == "") {
                alert("验证码不能为空，请输入验证码！");
                loginForm.verification2.focus();
                return false;
            }
            if(loginForm.verification2.value != loginForm.verification1.value) {
                alert("验证码错误！");
                loginForm.verification2.focus();
                return false;
            }

            return true;

        }
    </script>
  </head> 

  <body>
    <form name="loginForm" action="check.jsp" method="post" onsubmit="return loginCheck();">
        <table align="center">
            <tr align="center">
                <td colspan="2"><h1>欢迎登录</h1></td>
            </tr>
            <tr>
                <td>用户名：</td>
                <td><input name="userName" type="text"/></td>
            </tr>
            <tr>
                <td>密  码：</td>
                <td><input name="userPassword" type="password"/></td>
            </tr>
            <%//获取随机数
                int num1 = (int)(Math.random() * 10);
                int num2 = (int)(Math.random() * 10);
                int num3 = (int)(Math.random() * 10);
                int num4 = (int)(Math.random() * 10);

                String num = num1 + "" + num2 + num3 + num4;

             %>
            <span style="color:#339999;background-color: rgb(255, 255, 255);"> <!-- 写一个隐藏域，用来进行验证比较 --></span>
             <tr>
                <td><input name="verification1" type="hidden" value="<%=num %>"/></td>
             </tr>
             <tr>
                <td>验证码：</td>
                 <td>
                    <input name="verification2" type="text" style="width: 60px;">
                    <img src="image/<%=num1 %>.png" />
                    <img src="image/<%=num2 %>.png" />
                    <img src="image/<%=num3 %>.png" />
                    <img src="image/<%=num4 %>.png" />
                 </td>
             </tr>
             <tr>
                <td colspan="2">
                    <input type="submit" value="提交">
                    <input type="reset" value="重置">
                </td>
             </tr>
        </table>
    </form>
  </body>
</html>

4.0 check.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>    
    <title>检查页面</title>
  </head>

  <body>
    <%
        String name = request.getParameter("userName");
        String password = request.getParameter("userPassword");
        String message;

        if(name.equals("li") && password.equals("123456")) {
            message = "可以登录系统！";
        } else {
            message = "用户名或密码错误！";
        }
     %>
     <script type="text/javascript">
        alert("<%=message%>");
        window.location.href = 'login.jsp';
     </script>
  </body>
</html>

李广亮

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
WEB登录页面加入简单验证码

1.0 找了几张数字图片，在登录页面做了简单的验证码，如下图：2.0 验证码正确，登录系统，否则返回登录页面3.0 index.jsp：<%@ page language="java" import="java.util.*" pageEncoding="gbk"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><ht
复制链接

扫一扫