9.24java wab实现创建新界面验证码
<!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
9.24java wab实现创建新界面验证码的更多相关文章
- php创建新用户注册界面布局实例
php创建新用户注册界面布局实例 <!DOCTYPE> <html> <head> <title>Load page</title> < ...
- Yii2创建多界面主题（Theme）
Yii2界面主题上的设计总体上和Yii1.x保持一致,区别在于两个地方: 1. 由于Yii2引入了独立的视图(View)类,因此界面主题(Theme)也交由视图来管理: 2. 视图文件和Web资源在目 ...
- 重装windows7企业版时提示“安装程序无法创建新的系统分区,也无法定位现有系统
第一步:把win7镜像发在你电脑的非系统盘的其他硬盘上. 第二步:重启机器,通过U 盘启动．进入win pe系统,关于这点我说一下,有些朋友也许不知道什么叫win pe系统,这个win pe 究竟有什 ...
- 解决Win7系统安装时“安装程序无法定位现有 系统分区，也无法创建新的系统分区”提示
第一步:U盘启动装系统时,格式化主分区的内容后出现上面的问题 第二步:重启机器,通过U 盘启动．进入win pe系统. 第三步:把windows 7的ISO镜像解压到电脑的非系统盘的其他硬盘上.如D: ...
- OpenID倡议：别再创建新的用户名和密码
原文作者:Jeff Atwood 随着Stack Overflow开发工作的逐步深入,我们不可回避地碰到了这个问题:我们需要让用户登录,即使网络上用户名/密码已经泛滥成灾,我们也只能随波逐流.我已经有 ...
- win32 htmlayout点击按钮创建新窗口，以及按钮图片样式
最近在做一个C++ win32的桌面图形程序,我不是C++程序员,做这个只是因为最近没什么java的活. windows api,之前接触的时候,还是大学,那时用这个开发打飞机游戏纯粹是娱乐.现在基本 ...
- 用PE安装操作系统时：无法创建新的系统分区 也无法定位现有系统分区 的解决办法
借助U盘的用PE安装操作系统时系统提示:无法创建新的系统分区 也无法定位现有系统分区 的解决办法... --------------------------------- 具体原因是安装时加载到安装程 ...
- What?VS2019创建新项目居然没有.NET Core3.0的模板?Bug?
今天是个值得欢喜的日子,因为VS2019在今天正式发布了.作为微软粉,我已经用了一段时间的VS2019 RC版本了.但是,今天有很多小伙伴在我的<ASP.NET Core 3.0 上的gRPC服 ...
- [record]WebLogic域之创建-文本界面
WebLogic域的创建方式主要有图形界面.文本方式(字符界面).脚本方式(WLST脚本)等,本文用文本方式来创建域. 一.启动Configuration Wizard •config.cmd/con ...
- windows 7 安装时提示：安装程序无法创建新的系统分区
window7纯净通过U盘引导进行硬盘安装: 系统提示"安装程序无法创建新的系统分区,也无法定位现有分区",导致安装无法进行. 解决办法1: 一种非常简单的办法,首先需要将C盘重新 ...
随机推荐
- 全网最适合入门的面向对象编程教程：57 Python字符串与序列化-序列化与反序列化
全网最适合入门的面向对象编程教程:57 Python 字符串与序列化-序列化与反序列化 摘要: Python 序列化与反序列化是将 Python 对象转换为字节流(序列化)以便存储或传输,和将字节流转 ...
- 深入理解Java并发读写锁——ReentrantReadWriteLock
ReentrantReadWriteLock使用场景 ReentrantReadWriteLock 是 Java 的一种读写锁,它允许多个读线程同时访问,但只允许一个写线程访问(会阻塞所有的读写线程) ...
- 盘点.NET支持的 处理器架构
在一个会议上,中国招投标协会的技术负责人居然当着很多领导的面说.NET不能在国产服务器上运行,可以说这个技术负责人非蠢即坏.国产服务器的处理器架构主要包括x86.ARM.LoongArch.risc- ...
- 云原生周刊：Kubernetes v1.29 新特性一览 ｜ 2023.12.11
开源项目推荐 kubedog Kubedog 是一个用于在 CI/CD 部署管道中监视和跟踪 Kubernetes 资源的库. 这个库被用于 werf CI/CD 工具中,在部署过程中跟踪资源. Ru ...
- 使用 vscode 编译+运行 typescropt Mac win同理
一..d.ts文件最好在src/typings 目录下,可在tsconfig.json 文件配置 二.vs 监听文件变化,自动编译ts文件 tsconfig.json { "compiler ...
- RTCP报文解析
RTCP包的头部结构体定义 struct RTCP_Header { unsigned short rc:5; unsigned short padding:1; unsigned short ver ...
- Metal 开发教程（一）
原文链接: https://developer.apple.com/documentation/metalkit/mtkview?language=objc MTKView 用于创建,配置,显示met ...
- 学英语工具集KindleVocab和WordSaver
学英语坚持不下去是因为没选好工具. 我现在用的工具是Kindle+网页读新闻 生词点按之后导出到Anki背诵 借助工具,整个过程几乎无痛 1.Kindle生词及所在句子导出软件 KindleVocab ...
- PTA题目集4~6的总结性Blog
· 前言 本次的三个作业,由答题判题程序- 4.家居强电电路模拟程序- 1.家居强电电路模拟程序 -2组成. 答题判题程序-4是对前三次判题程序的最后升级,设计多个子类继承于基础题类来实现对每种题型的 ...
- Python 潮流周刊#78：async/await 是糟糕的设计（摘要）
本周刊由 Python猫 出品,精心筛选国内外的 250+ 信息源,为你挑选最值得分享的文章.教程.开源项目.软件工具.播客和视频.热门话题等内容.愿景:帮助所有读者精进 Python 技术,并增长职 ...