使用html引入在线vue,生成vue登陆表单要求带正则验证和验证码(验证码随机数生成)
时间: 2023-05-28 15:01:14 浏览: 167
<!DOCTYPE html>
<html>
<head>
<title>Vue Login Form with Regex Validation and Captcha</title>
<!-- Vue.js framework -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- Bootstrap CSS framework -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Captcha CSS -->
<style type="text/css">
#captcha {
font-size: 24px;
font-weight: bold;
color: #337ab7;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app" class="container">
<h1>Vue Login Form with Regex Validation and Captcha</h1>
<!-- Login form -->
<form class="form-horizontal" @submit.prevent="submitForm">
<div class="form-group" :class="{'has-error':!usernameValid}">
<label for="username" class="col-sm-2 control-label">Username</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" placeholder="Username" v-model.trim="username" @blur="checkUsername" required>
<span class="help-block" v-if="!usernameValid">Username must contain only letters, numbers and underscores.</span>
</div>
</div>
<div class="form-group" :class="{'has-error':!passwordValid}">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="Password" v-model.trim="password" @blur="checkPassword" required>
<span class="help-block" v-if="!passwordValid">Password must be at least 8 characters long and contain at least one lowercase letter, one uppercase letter, one number and one special character.</span>
</div>
</div>
<div class="form-group" :class="{'has-error':captchaError}">
<label class="col-sm-2 control-label">Captcha</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter Captcha" v-model.trim="captcha" required>
<span class="help-block" v-if="captchaError">Invalid Captcha. Please try again.</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" :disabled="submitDisabled">Submit</button>
</div>
</div>
</form>
<!-- Captcha -->
<div id="captcha" @click="generateCaptcha">{{captcha}}</div>
</div>
<!-- Vue.js script -->
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
username: '',
password: '',
captcha: '',
captchaError: false,
usernameValid: true,
passwordValid: true
},
methods: {
// Submit login form
submitForm() {
if (this.captcha === this.generatedCaptcha) {
// Do login action here
alert('Login successful!');
} else {
this.captchaError = true;
}
},
// Check if username is valid
checkUsername() {
var regex = /^[a-zA-Z0-9_]+$/;
this.usernameValid = regex.test(this.username);
},
// Check if password is valid
checkPassword() {
var regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
this.passwordValid = regex.test(this.password);
},
// Generate captcha
generateCaptcha() {
var length = 6;
var chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
var result = '';
for (var i = length; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)];
this.generatedCaptcha = result;
this.captcha = '';
this.captchaError = false;
}
},
computed: {
// Check if submit button is disabled
submitDisabled() {
return !this.usernameValid || !this.passwordValid || !this.captcha;
}
},
watch: {
// On change of captcha, set captcha error to false
captcha() {
this.captchaError = false;
}
},
mounted() {
// Generate captcha on page load
this.generateCaptcha();
}
})
</script>
</body>
</html>
阅读全文
相关推荐
大家在看
silvaco中文学习资料
silvaco中文资料。
希望对大家有帮助。。。。。。
AES128（CBC或者ECB）源码
AES128（CBC或者ECB）源码，在C语言环境下运行。
EMC VNX 5300使用安装
目录
1.通过IE登录储存 3
2.VNX5300管理界面 3
3.创建Raid Group 4
4.Raid Group 中储存LUN 7
5.注册服务器 9
6.创建 Storge Group 11
华为MA5671光猫使用 华为MA5671补全shell 101版本可以补全shell，安装后自动补全，亲测好用，需要的可以下载
华为MA5671光猫使用 华为MA5671补全shell 101版本可以补全shell，安装后自动补全，亲测好用，需要的可以下载，企业光猫稳定性还是可以
视频转换芯片 TP9950 iic 驱动代码
TP9950 芯片是一款功能丰富的视频解码芯片，具有以下特点和功能：
高清视频解码：支持多种高清模拟视频格式解码，如支持高清传输视频接口（HD-TVI）视频，还能兼容 CVI、AHD、TVI 和 CVBS 等格式，最高支持 1 路 1080p@30fps 的视频输入 。
多通道输入与输出：
支持 4 路视频接入，并可通过一路输出。
可以通过 CSI 接口输出，也可以通过并行的 BT656 接口输出。
图像信号处理：对一致性和性能进行了大量的数字信号处理，所有控制回路均可编程，以实现最大的灵活性。所有像素数据均根据 SMPTE-296M 和 SMPTE-274M 标准进行线锁定采样，并且具有可编程的图像控制功能，以达到最佳的视频质量 。
双向数据通信：与兼容的编码器或集成的 ISP 与 HD-TVI 编码器和主机控制器一起工作时，支持在同一电缆上进行双向数据通信 。
集成 MIPI CSI-2 发射机：符合 MIPI 的视频数据传输标准，可方便地与其他符合 MIPI 标准的设备进行连接和通信 。
TP9950 芯片主要应用于需要进行高清视频传输和处理的领域，例如汽车电子（如车载监控、行车
最新推荐
使用form-create动态生成vue自定义组件和嵌套表单组件
在本文中，我们将深入探讨如何使用`form-create`来动态生成vue自定义组件和嵌套表单组件。 首先，`form-create`的核心在于`maker`对象，它提供了一系列的方法来创建不同类型的组件。例如，`maker.create()`可以用来...
Vue表单验证插件Vue Validator使用方法详解
首先，为了使用Vue Validator，我们需要在项目中引入Vue.js和Vue Validator的库文件。在示例代码中，引用了Vue 1.0.24和Vue Validator 2.1.3的CDN链接。 基础使用： Vue Validator的使用始于在HTML模板中包裹一个`...
浅谈vue同一页面中拥有两个表单时,的验证问题
这种现象是由于Vue的数据绑定和组件状态保留导致的，它需要我们在切换表单时清除当前表单的验证状态。 解决办法： 为了解决这个问题，Vue提供了一种称为`ref`的特性，可以让我们方便地引用和操作页面中的组件。在每...
vue实现一个6个输入框的验证码输入组件功能的实例代码
在这个实例中，我们将讨论如何使用 Vue 来实现一个六位数字的验证码输入组件。这个组件具备多种交互功能，包括限制输入为数字、正常输入、通过退格键删除、在任意位置粘贴、通过滚轮微调数字大小以及自动覆盖光标后...
vue生成文件本地打开查看效果的实例
在Vue.js开发过程中，有时候我们需要生成文件并在本地进行预览和测试，以确保应用在实际环境中的表现。本文将详细介绍如何在Vue项目中生成文件并实现本地打开查看效果，以及解决在npm run build后遇到的资源路径问题...
掌握Android RecyclerView拖拽与滑动删除功能
知识点:
1. Android RecyclerView使用说明:
RecyclerView是Android开发中经常使用到的一个视图组件，其主要作用是高效地展示大量数据，具有高度的灵活性和可配置性。与早期的ListView相比，RecyclerView支持更加复杂的界面布局，并且能够优化内存消耗和滚动性能。开发者可以对RecyclerView进行自定义配置，如添加头部和尾部视图，设置网格布局等。
2. RecyclerView的拖拽功能实现:
RecyclerView通过集成ItemTouchHelper类来实现拖拽功能。ItemTouchHelper类是RecyclerView的辅助类，用于给RecyclerView添加拖拽和滑动交互的功能。开发者需要创建一个ItemTouchHelper的实例，并传入一个实现了ItemTouchHelper.Callback接口的类。在这个回调类中，可以定义拖拽滑动的方向、触发的时机、动作的动画以及事件的处理逻辑。
3. 编辑模式的设置:
编辑模式（也称为拖拽模式）的设置通常用于允许用户通过拖拽来重新排序列表中的项目。在RecyclerView中，可以通过设置Adapter的isItemViewSwipeEnabled和isLongPressDragEnabled方法来分别启用滑动和拖拽功能。在编辑模式下，用户可以长按或触摸列表项来实现拖拽，从而对列表进行重新排序。
4. 左右滑动删除的实现:
RecyclerView的左右滑动删除功能同样利用ItemTouchHelper类来实现。通过定义Callback中的getMovementFlags方法，可以设置滑动方向，例如，设置左滑或右滑来触发删除操作。在onSwiped方法中编写处理删除的逻辑，比如从数据源中移除相应数据，并通知Adapter更新界面。
5. 移动动画的实现:
在拖拽或滑动操作完成后，往往需要为项目移动提供动画效果，以增强用户体验。在RecyclerView中，可以通过Adapter在数据变更前后调用notifyItemMoved方法来完成位置交换的动画。同样地，添加或删除数据项时，可以调用notifyItemInserted或notifyItemRemoved等方法，并通过自定义动画资源文件来实现丰富的动画效果。
6. 使用ItemTouchHelperDemo-master项目学习:
ItemTouchHelperDemo-master是一个实践项目，用来演示如何实现RecyclerView的拖拽和滑动功能。开发者可以通过这个项目源代码来了解和学习如何在实际项目中应用上述知识点，掌握拖拽排序、滑动删除和动画效果的实现。通过观察项目文件和理解代码逻辑，可以更深刻地领会RecyclerView及其辅助类ItemTouchHelper的使用技巧。
【IBM HttpServer入门全攻略】：一步到位的安装与基础配置教程
# 摘要
本文详细介绍了IBM HttpServer的全面部署与管理过程，从系统需求分析和安装步骤开始，到基础配置与性能优化，再到安全策略与故障诊断，最后通过案例分析展示高级应用。文章旨在为系统管理员提供一套系统化的指南，以便快速掌握IBM HttpServer的安装、配置及维护技术。通过本文的学习，读者能有效地创建和管理站点，确保
[root@localhost~]#mount-tcifs-0username=administrator,password=hrb.123456//192.168.100.1/ygptData/home/win mount：/home/win：挂载点不存在
### CIFS挂载时提示挂载点不存在的解决方案
当尝试通过 `mount` 命令挂载CIFS共享目录时，如果遇到错误提示“挂载点不存在”，通常是因为目标路径尚未创建或者权限不足。以下是针对该问题的具体分析和解决方法：
#### 创建挂载点
在执行挂载操作之前，需确认挂载的目标路径已经存在并具有适当的权限。可以使用以下命令来创建挂载点：
```bash
mkdir -p /mnt/win_share
```
上述命令会递归地创建 `/mnt/win_share` 路径[^1]。
#### 配置用户名和密码参数
为了成功连接到远程Windows共享资源，在 `-o` 参数中指定 `user
惠普8594E与IT8500系列电子负载使用教程
在详细解释给定文件中所涉及的知识点之前，需要先明确文档的主题内容。文档标题中提到了两个主要的仪器：惠普8594E频谱分析仪和IT8500系列电子负载。首先，我们将分别介绍这两个设备以及它们的主要用途和操作方式。
惠普8594E频谱分析仪是一款专业级的电子测试设备，通常被用于无线通信、射频工程和微波工程等领域。频谱分析仪能够对信号的频率和振幅进行精确的测量，使得工程师能够观察、分析和测量复杂信号的频谱内容。
频谱分析仪的功能主要包括：
1. 测量信号的频率特性，包括中心频率、带宽和频率稳定度。
2. 分析信号的谐波、杂散、调制特性和噪声特性。
3. 提供信号的时间域和频率域的转换分析。
4. 频率计数器功能，用于精确测量信号频率。
5. 进行邻信道功率比(ACPR)和发射功率的测量。
6. 提供多种输入和输出端口，以适应不同的测试需求。
频谱分析仪的操作通常需要用户具备一定的电子工程知识，对信号的基本概念和频谱分析的技术要求有所了解。
接下来是可编程电子负载，以IT8500系列为例。电子负载是用于测试和评估电源性能的设备，它模拟实际负载的电气特性来测试电源输出的电压和电流。电子负载可以设置为恒流、恒压、恒阻或恒功率工作模式，以测试不同条件下的电源表现。
电子负载的主要功能包括：
1. 模拟各种类型的负载，如电阻性、电感性及电容性负载。
2. 实现负载的动态变化，模拟电流的变化情况。
3. 进行短路测试，检查电源设备在过载条件下的保护功能。
4. 通过控制软件进行远程控制和自动测试。
5. 提供精确的电流和电压测量功能。
6. 通过GPIB、USB或LAN等接口与其他设备进行通信和数据交换。
使用电子负载时，工程师需要了解其操作程序、设置和编程方法，以及如何根据测试目的配置负载参数。
文档的描述部分提到了这些资料的专业性和下载人群的稀少。这可能暗示了这些设备的目标用户是具备一定专业知识的工程师和技术人员，因此文档内容将涵盖较为复杂的操作指南和技术细节。
标签中提到了“中文说明书”，表明这些文件是为中文用户提供方便而制作的，这对于不熟悉英语的技术人员来说是非常重要的。这有助于减少语言障碍，使得中文使用者能够更容易掌握这些专业的测试设备使用方法。
综上所述，惠普8594E频谱分析仪和IT8500系列电子负载都是测试设备领域中不可或缺的工具。掌握它们的使用方法和功能对于电子工程师来说是必需的。这些设备在维护和开发电子系统、电源设备以及无线通信设备中起着至关重要的作用。这份文档对于涉及相关领域的工作技术人员，特别是在中国环境下，提供了非常实用和必需的专业知识。
MATLAB与Python在SAR点目标仿真中的对决：哪种工具更胜一筹？
# 摘要
本文系统地探讨了SAR点目标仿真技术，重点分析了MATLAB和Python在这一领域的应用及其潜在价值。首先概述了SAR仿真概念和需求，然后详细介绍了MATLAB在SAR仿真中的功能、信号处理应用以及仿真实例。接着，文章转向Python，分析了其语言特点、生态系统