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盘重新 ...
随机推荐
- 2024 年 04 月编程语言排行榜，PHP 排名创新低？
编程语言的流行度总是变化莫测,每个月的排行榜都揭示着新的趋势.2024年4月的编程语言排行榜揭示了一个引人关注的现象:PHP的排名再次下滑,创下了历史新低.这种变化对于PHP开发者和整个技术社区来 ...
- KubeSphere DevOps 流水线入门指南
作者:赵海亮,浙江大学计算机专业四年级在读博士生,研究方向为云计算.边缘计算.分布式系统等. 虽然 KubeSphere 能够将我们从 yaml 文件的编写中解放出来,但是项目上云仍然十分繁琐. 此外 ...
- 锁的分类和JUC
锁的分类 乐观锁.悲观锁 对于同一个数据的并发操作,悲观锁认为自己在使用数据的时候一定有别的线程来修改数据,因此在获取数据的时候会先加锁,确保数据不会被别的线程修改.Java 中,synchroniz ...
- 二叉树遍历(C语言版）
二叉树遍历 先序 递归 int *res; void preorder(struct TreeNode *root, int *returnSize) { if (root == NULL) retu ...
- 同步完善Docker常用操作命令
镜像 images_name 表示镜像名 con_name表示容器名 #获取镜像 docker pull images_name #查看已有的docker镜像 docker images #删除镜像 ...
- Marklogic学习 系列专栏整理
Marklogic学习 系列专栏整理 本人就是个松鼠怪,见到好东西都想收藏,在CSDN发现了这位博主写的一系列MarkLogic相关专栏觉得不错,今天已经看到第六个了,反正很好吃,趁着最近项目使用Ma ...
- debian大便系统配置国内软件源
本例在debian:buster-slim docker镜像中实验通过 1.启动docker实例 docker run -it --name debian debian:buster-slim bas ...
- Minio安装以及使用
Minio介绍 MinIO 是一个基于Apache License v2.0开源协议的对象存储服务.适合于存储大容量非结构化的数据,例如图片.视频.日志文件.备份数据和容器/虚拟机镜像等,而一个对象文 ...
- 盘点Air780E的FTP应用，你了解吗？
一.FTP 概述 FTP(File Transfer Protocol,文件传输协议) 是 TCP/IP 协议组中的协议之一. FTP协议包括两个组成部分,其一为FTP服务器,其二为FTP客户端. ...
- CommonsCollections5（基于ysoserial）
环境准备 JDK1.8(8u421)我以本地的JDK8版本为准.commons-collections(3.x 4.x均可这里使用3.2版本) cc3.2: <dependency> &l ...