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盘重新 ...
随机推荐
- 从2s优化到0.1s，我用了这5步
前言 分类树查询功能,在各个业务系统中可以说随处可见,特别是在电商系统中. 但就是这样一个简单的分类树查询功能,我们却优化了5次. 到底是怎么回事呢? 背景 我们的网站使用了SpringBoot推荐的 ...
- Required request parameter ‘xxx‘ for method parameter type xxxx is not present 解决方式
我在controller层传实体参数时加了@RequestParam,结果报Required request parameter 'pointlist' for method parameter ty ...
- KubeSphere 社区双周报｜ 2024.08.02-08.15
KubeSphere 社区双周报主要整理展示新增的贡献者名单和证书.新增的讲师证书以及两周内提交过 commit 的贡献者,并对近期重要的 PR 进行解析,同时还包含了线上/线下活动和布道推广等一系列 ...
- OpenFunction 1.2.0 发布：集成 KEDA http-addon 作为同步函数运行时
OpenFunction 是一个开源的云原生 FaaS(Function as a Service,函数即服务)平台,旨在帮助开发者专注于业务逻辑的研发.我们非常高兴地宣布 OpenFunction ...
- 云原生周刊：ingress2gateway 发布 | 2023.10.30
开源项目推荐 m9sweeper m9sweeper 是一个免费且简单的 Kubernetes 安全平台.它将行业标准的开源实用程序集成到一站式 Kubernetes 安全工具中,该工具可以帮助大多数 ...
- 一文彻底弄懂并解决Redis的缓存雪崩，缓存击穿，缓存穿透
缓存雪崩.缓存击穿.缓存穿透是分布式系统中使用缓存时,常遇到的三类问题,都会对系统性能和稳定性产生严重影响.下面将详细介绍这三者的定义.产生原因.危害以及常见的解决方案. 1. 缓存雪崩 1.1 定义 ...
- AI五子棋_09 消息循环实现自动对局
AI五子棋 第九步 恭喜你到达第九步! 上一步我们已经完成了一个AI大脑的最核心功能.我们可以用它来对战了. 访问服务器 http://202.207.12.156:9012/join_game,会返 ...
- 解决 在docker环境中 mosquitto 无法启动 报错等问题
报错内容 1592979788: Error: Unable to open log file /Users/bigbird/mqttconfig/mosquitto/log/mosquitto.lo ...
- [离线计算-Spark|Hive] 大数据应用性能指标采集工具改造落地
背景 主要介绍针对平台的spark应用程序,在不修改用户程序的情况下 如何采集其资源和性能指标为后续分析使用,如性能优化,资源使用计价等. 分析挑战 在应用程序级别关联大量进程的指标 在分布式环境中, ...
- MYSQL SQL做题总结
一.关于join 1.内外左右连接 2.交叉联结(corss join) 使用交叉联结会将两个表中所有的数据两两组合.如下图,是对表"text"自身进行交叉联结的结果: 3.三表双 ...