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盘重新 ...
随机推荐
- 【转】sqlplus/RMAN/lsnrctl 等工具连接缓慢
AIX上sqlplus /as sysdba rman target / 或者lsnrctl start时或者通过sqlplus system/oracle@orcl这样通过监听连接等方式来登陆时非常 ...
- 云原生爱好者周刊：非容器化应用也需要 Docker Compose
开源项目推荐 Process Compose Process Compose 是一个调度编排工具,不过不是用来调度容器的,而是用来调度非容器化的应用,可以定义进程的依赖性和启动顺序,也可以定义重启策略 ...
- appium-命令行启动appium-server（windows）
首先找到build\lib\main.js所在位置,我用的工具是everything(推荐一波),比windows自带的搜索强太多 执行命令:node C:\Users\Acer\AppData\Ro ...
- 人工智能模型训练中的数据之美——探索TFRecord
上一篇:<构建人工智能模型基础:TFDS和Keras的完美搭配> 序言:在人工智能模型的训练过程中,如何高效管理和处理大量数据是一个重要的课题.TensorFlow 的 TFRecord ...
- “地表最强”人形机器人亮相：视觉&语音推理能力
Figure 02配备了机载的视觉语言模型(VLM),使其能够进行快速的常识性视觉推理. 相关: https://mbd.baidu.com/newspage/data/landingsuper?co ...
- 为 .NET Conf 2024 做好准备之本地社区活动 .NET Conf China 2024 启动
.NET Conf 2024 是一个面向.NET生态系统社区的大型活动,将于2024年11月12日至14日举行.该活动将通过YouTube和Twitch进行现场直播,并在dotnetconf.net网 ...
- Gitlab的基本操作
Gitlab的基本操作 Gitlab添加组 添加组建组有多个项目分支,可以将开发添加到组里面进行设置权限, 不同的组就是公司不同的开发项目或者服务模块,不同的组添加不同的开发即可实现对开发设置权限的 ...
- ABP - 菜单配置（导航栏选中高亮，高亮并定位当前标题）
配置一个如上图所示的菜单: 1.打开文件NavigationProvider.cs 添加如下代码(如下图所示) .AddItem(new MenuItemDefinition( PageNames.A ...
- 读书笔记-C#8.0本质论-05
18.3 基于任务的异步编程模式 18.3.1 使用任务并行库(TPL)实现异步执行高延迟操作 using System; using System.Net.Http; using System.Th ...
- java公式解析器学习与开发（2）——前缀表达式
释义 前缀表达式就是前序表达式. 前缀表达式就是不含括号的算术表达式,而且它是将运算符写在前面,操作数写在后面的表达式,为纪念其发明者波兰数学家Jan Lukasiewicz也称为"波兰式& ...