<!DOCTYPE html>

<html>

<head>

  <title>User Login</title>

  <style>

    .container {

      width: 300px;

      margin: 0 auto;

      padding: 20px;

      border: 1px solid #ccc;

      text-align: center;

    }

    .input-group {

      margin-bottom: 10px;

    }

    .input-group label {

      display: block;

      margin-bottom: 5px;

    }

    .input-group input {

      width: 100%;

      padding: 5px;

    }

    .input-group img {

      margin-top: 10px;

    }

    .input-group button {

      width: 100%;

      padding: 7px;

      background-color: #4CAF50;

      color: white;

      border: none;

    }

  </style>

  <script>

    function generateCaptcha() {

      var captcha = '';

      var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

      var captchaLength = 4;

      for (var i = 0; i < captchaLength; i++) {

        captcha += characters.charAt(Math.floor(Math.random() * characters.length));

      }

      // Display the generated captcha

      document.getElementById('captcha').textContent = captcha;

      // Update the captcha image source with the generated captcha

      document.getElementById('captchaImage').src = 'https://dummyimage.com/150x50/000/fff&text=' + captcha;

    }

    function validateForm(event) {

      event.preventDefault(); // Prevent form submission

      var captchaInput = document.getElementById('captchaInput').value;

      var captchaLabel = document.getElementById('captcha').textContent;

      if (captchaInput.toUpperCase() === captchaLabel.toUpperCase()) {

        // Correct captcha, perform actions for successful login

        alert('Login successful!');

        // Redirect to success page here

        // Clear form data

        document.getElementById('username').value = '';

        document.getElementById('password').value = '';

        document.getElementById('captchaInput').value = '';

        // Generate a new captcha

        generateCaptcha();

      } else {

        // Incorrect captcha, show error message

        alert('Incorrect captcha!');

        // Clear captcha input

        document.getElementById('captchaInput').value = '';

        // Generate a new captcha

        generateCaptcha();

      }

    }

  </script>

</head>

<body onload="generateCaptcha()">

  <div class="container">

    <h2>User Login</h2>

    <form action="/login" method="post" onsubmit="validateForm(event)">

      <div class="input-group">

        <label for="username">Username:</label>

        <input type="text" id="username" name="username" required>

      </div>

      <div class="input-group">

        <label for="password">Password:</label>

        <input type="password" id="password" name="password" required>

      </div>

      <div class="input-group">

        <label for="captcha">Captcha:</label>

        <input type="text" id="captchaInput" name="captcha" required>

        <span id="captcha"></span>

        <img src="" alt="Captcha" id="captchaImage">

        <button type="button" onclick="generateCaptcha()">Refresh</button>

      </div>

      <div class="input-group">

        <button type="submit">Login</button>

      </div>

    </form>

  </div>

</body>

</html>

　　

User Login

.container { width: 300px; margin: 0 auto; padding: 20px; border: 1px solid rgba(204, 204, 204, 1); text-align: center }
.input-group { margin-bottom: 10px }
.input-group label { display: block; margin-bottom: 5px }
.input-group input { width: 100%; padding: 5px }
.input-group img { margin-top: 10px }
.input-group button { width: 100%; padding: 7px; background-color: rgba(76, 175, 80, 1); color: rgba(255, 255, 255, 1); border: none }

User Login

Username:
Password:
Captcha: Refresh
Login

9.24java wab实现创建新界面验证码的更多相关文章

  1. php创建新用户注册界面布局实例

    php创建新用户注册界面布局实例 <!DOCTYPE> <html> <head> <title>Load page</title> < ...

  2. Yii2创建多界面主题（Theme）

    Yii2界面主题上的设计总体上和Yii1.x保持一致,区别在于两个地方: 1. 由于Yii2引入了独立的视图(View)类,因此界面主题(Theme)也交由视图来管理: 2. 视图文件和Web资源在目 ...

  3. 重装windows7企业版时提示“安装程序无法创建新的系统分区,也无法定位现有系统

    第一步:把win7镜像发在你电脑的非系统盘的其他硬盘上. 第二步:重启机器,通过U 盘启动．进入win pe系统,关于这点我说一下,有些朋友也许不知道什么叫win pe系统,这个win pe 究竟有什 ...

  4. 解决Win7系统安装时“安装程序无法定位现有 系统分区，也无法创建新的系统分区”提示

    第一步:U盘启动装系统时,格式化主分区的内容后出现上面的问题 第二步:重启机器,通过U 盘启动．进入win pe系统. 第三步:把windows 7的ISO镜像解压到电脑的非系统盘的其他硬盘上.如D: ...

  5. OpenID倡议：别再创建新的用户名和密码

    原文作者:Jeff Atwood 随着Stack Overflow开发工作的逐步深入,我们不可回避地碰到了这个问题:我们需要让用户登录,即使网络上用户名/密码已经泛滥成灾,我们也只能随波逐流.我已经有 ...

  6. win32 htmlayout点击按钮创建新窗口，以及按钮图片样式

    最近在做一个C++ win32的桌面图形程序,我不是C++程序员,做这个只是因为最近没什么java的活. windows api,之前接触的时候,还是大学,那时用这个开发打飞机游戏纯粹是娱乐.现在基本 ...

  7. 用PE安装操作系统时：无法创建新的系统分区 也无法定位现有系统分区 的解决办法

    借助U盘的用PE安装操作系统时系统提示:无法创建新的系统分区 也无法定位现有系统分区 的解决办法... --------------------------------- 具体原因是安装时加载到安装程 ...

  8. What?VS2019创建新项目居然没有.NET Core3.0的模板?Bug?

    今天是个值得欢喜的日子,因为VS2019在今天正式发布了.作为微软粉,我已经用了一段时间的VS2019 RC版本了.但是,今天有很多小伙伴在我的<ASP.NET Core 3.0 上的gRPC服 ...

  9. [record]WebLogic域之创建-文本界面

    WebLogic域的创建方式主要有图形界面.文本方式(字符界面).脚本方式(WLST脚本)等,本文用文本方式来创建域. 一.启动Configuration Wizard •config.cmd/con ...

  10. windows 7 安装时提示：安装程序无法创建新的系统分区

    window7纯净通过U盘引导进行硬盘安装: 系统提示"安装程序无法创建新的系统分区,也无法定位现有分区",导致安装无法进行. 解决办法1: 一种非常简单的办法,首先需要将C盘重新 ...

随机推荐

  1. CSS动画（动态导航栏）

    1.项目简介 一个具有创意的导航菜单不仅能为你的大作业增色,还能展示你的技术实力.本文将分享一系列常用于期末大作业的CSS动画导航效果,这些效果不仅外观酷炫,而且易于实现.我们提供了一键复制的代码,让 ...

  2. .NET + 微信小程序开源多功能电商系统

    前言 推荐一款基于微信小程序.LayUI 和 .NET 平台的多功能电商系统,支持二次开发和扩展,帮助大家轻松快速搭建一个功能全面且易于管理的在线商城. 项目介绍 该项目不仅包含了微信小程序前端,还配 ...

  3. python统计人的视角(1)——python基础

    3D画图 import matplotlib import matplotlib.pyplot as plt import numpy as np fig=plt.figure() ax=fig.ad ...

  4. C#中的Math.Round

    开发者为了实现小数点后 2 位的四舍五入,编写了如下代码, var num = Math.Round(12.125, 2); 代码非常的简单,开发者实际得到的结果是12.12, 这与其所预期的四舍五入 ...

  5. 手搓党分享：用Air700E开发板+毫米波雷达，搓一个睡眠监测仪！

    ​ 只能说,看到这个大佬分享的睡眠监测仪,手上的手环瞬间不香了... 用Air700E开发板+毫米波雷达,手搓一个开箱即用的睡眠监测仪,不花冤枉钱! 一.项目原理及硬件制作 毫米波是指频率范围从30- ...

  6. 本机环境virtualbox出现问题重装

    vagrant reload 的时候 电脑卡住死机了,然后我重启了以后就没办法启动了,于是重装这个 vagrant 使用  sudo apt-get remove vagrant  然后如果清除不干净 ...

  7. 不依赖 Spring，你会如何自实现 RabbitMQ 消息的消费（一）

    开心一刻 上午一好哥们微信我哥们:哥们在干嘛,晚上出来吃饭我:就我俩吗哥们:对啊我:那多没意思,我叫俩女的出来哥们:好啊,哈哈哈晚上吃完饭到家后,我给哥们发消息我:今天吃的真开心,下次继续哥们:开心尼 ...

  8. rust 终端输出 debug 信息

    配置方法 将 env_logger log 添加到 Cargo.toml : 打开 Cargo.toml 文件并在 [dependencies] 部分下添加 env_logger log . [pac ...

  9. apisix lua插件开发

    1. 怎么定义ngx自定义变量 ngx.var.custom_var nginx_config: # config for render the template to generate nginx. ...

  10. Solr 4.0 基础教程

    本文只是Solr 4.0的基础教程,本人不经常写东西,写的不好请见谅,欢迎到群233413850进行讨论学习. 转载请标明原文地址:http://my.oschina.net/zhanyu/blog/ ...