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盘重新 ...
随机推荐
- CF1187E 题解
Title translation 给定一棵 \(n\) 个点的树,初始全是白点. 要做 \(n\) 步操作,每一次选定一个与一个黑点相隔一条边的白点,将它染成黑点,然后获得该白点被染色前所在的白色联 ...
- Cartographer学习——地图概率更新过程
前言:最近一直在研究建图,对google的开源SLAM框架 Cartographer 进行了源码梳理,发现很多巧妙的算法设计,结合原论文 <Real-time Loop Closure in 2 ...
- 基于surging的木舟平台如何上传模块热部署
一.概述 通过3个月的赶工,基本上快完成1.0版本的研发,将在下个月发布社区1.0版本. 木舟 (Kayak) 是什么? 木舟(Kayak)是基于.NET6.0软件环境下的surging微服务引擎进行 ...
- Java基础综合项目（ATM系统）
文章目录 1.ATM项目介绍 2.项目架构搭建.欢迎界面设计 3.开户功能实现 4.生成卡号 5.登录功能 6.展示用户操作界面 7.查询账户.退出 8.存款 9.取款 10.转账 11.修改密码 1 ...
- react+eslint+prettier 项目配置
项目地址 https://gitee.com/zhudachangs/react-eslint-prettierrc-demo 项目地址gitee 项目配置eslint(验证) + prettierr ...
- Java 面试用什么项目？全是商场秒杀 RPC，我吐了
看了几百份简历,真的超过 90% 的小伙伴的项目是商城.RPC.秒杀.论坛.外卖.点评等等烂大街的项目,人人都知道这些项目烂大街了,但大部分同学还是得硬着头皮做,没办法,网络上能找到的.教程比较完善的 ...
- 移动端元素定位辅助神器-WEditor
WEditor可以做什么? 编辑器能够提供辅助编写脚本,查看组件信息,调试代码等功能. 移动端除了用 Appium 来 做元素定位外,还可以通过 WEditor 来完成. 前置环境依赖按照 以 win ...
- 2023NOIP A层联测32 T3 sakuya
2023NOIP A层联测32 T3 sakuya 虚伪的期望,彬彬赛时都能 A 的数学题. 思路 考虑算出来总的花费,再除以 \(m!\) 求期望. 对于某个排列的花费为:\(\sum\limits ...
- mysql 批量重命名数据表、统一给表加前缀
背景 一个本地数据库,里面有 90 个数据表.由于历史原因,现在需要批量给以前的数据表加上一个前缀.于是安排人吭哧吭呲的人工修改,耗费一天工时.过了几天,又需要把统一前缀去掉.内心早已问候 @￥#%% ...
- 《Django 5 By Example》阅读笔记：p237-p338
<Django 5 By Example>学习第11天,p237-p338总结,总计102页. 一.技术总结 1.follow system(关注功能) 表之间的关系有三种:OneToOn ...