2023.11.15使用bootstrap做一个简洁的注册页面

news2024/11/25 10:25:04

2023.11.15使用bootstrap做一个简洁的注册页面

设置密码必须大于等于6位,并且包含大写字母、小写字母、特殊字符或者数字中的三种。
在这里插入图片描述
关注:type="button"和type="submit"之间的区别:
type="button"用于普通按钮,点击不触发表单提交,可以自定义点击事件;type="submit"用于表单中的提交按钮,点击会触发表单提交,将表单数据发送到服务器处理,并触发表单验证。在本代码中会有比较明显的效果区别。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
    <div class="row justify-content-center mt-5">
        <div class="col-md-6 col-lg-4">
            <h3 class="text-center mb-4">Login</h3>

            <!-- 登录表单 -->
            <form>
                <div class="form-group">
                    <label for="username">Username</label>
                    <input type="text" class="form-control" id="username" placeholder="Enter username">
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" class="form-control" id="password" placeholder="Enter password">
                </div>
                <p id="passwordError" style="color: red;"></p>
                <br>
                <!-- 注意下面的type必须是button,使用submit会出现闪现效果 -->
                <button type="button" class="btn btn-primary btn-block" id="registerButton">Login</button>
            </form>
            <hr>
            <!-- 忘记密码链接 -->
            <p class="text-center"><a href="#">Forgot password?</a></p>

            <!-- 注册链接 -->
            <p class="text-center">Don't have an account? <a href="#">Register</a></p>
        </div>
    </div>
</div>



<script>
      document.getElementById('registerButton').addEventListener('click', function() {
            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;
            var passwordError = document.getElementById('passwordError');

            // 密码验证规则:必须大于等于6位,并且包含大写字母、小写字母、特殊字符或者数字中的三种
            var passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d|\W).+$/;
            if (password.length < 6 || !passwordRegex.test(password)) {
                passwordError.textContent = '密码必须大于等于6位,并且包含大写字母、小写字母、特殊字符或者数字中的三种';
                return;
            } else {
                passwordError.textContent = ''; // 清空错误提示
            }
        });
</script>

</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1212201.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

工作中积累的对K8s的就绪和存活探针的一些认识

首先&#xff0c;我的项目是基于 Spring Boot 2.3.5 的&#xff0c;并依赖 spring-boot-starter-actuator 提供的 endpoints 来实现就绪和存活探针&#xff0c;POM 文件如下图&#xff1a; 下面&#xff0c;再让我们来看下与该项目对应的Deployment的YAML文件&#xff0c;如下…

Multisim数电仿真实验——SOS循环序列信号发生器

目录 一、前言二、设计思路2.1序列信号的实现2.2SOS信号的循环再现 三、最终电路图 一、前言 SOS电路是一种简单而重要的电子电路&#xff0c;用于产生和传输紧急信号。我们将介绍SOS电路的连接思路&#xff0c;包括所需的组件选择以及信号的连接方式。 二、设计思路 2.1序列…

Android 12 客制化修改初探-Launcher/Settings/Bootanimation

Android 12 使用 Material You 打造的全新系统界面&#xff0c;富有表现力、活力和个性。使用重新设计的微件、AppSearch、游戏模式和新的编解码器扩展您的应用。支持隐私信息中心和大致位置等新的保护功能。使用富媒体内容插入功能、更简便的模糊处理功能、经过改进的原生调试…

SDL2 播放音频数据(PCM)

1.简介 这里以常用的视频原始数据PCM数据为例&#xff0c;展示音频的播放。 SDL播放音频的流程如下&#xff1a; 初始化音频子系统&#xff1a;SDL_Init()。设置音频参数&#xff1a;SDL_AudioSpec。设置回调函数&#xff1a;SDL_AudioCallback。打开音频设备&#xff1a;SD…

免费IDEA插件分享:Apipost-Helper

今天给大家推荐一款IDEA插件&#xff1a;Apipost-Helper-2.0&#xff0c;写完代码IDEA内一键生成API文档&#xff0c;无需安装、打开任何其他软件&#xff1b;写完代码IDEA内一键调试&#xff0c;无需安装、打开任何其他软件&#xff1b;生成API目录树&#xff0c;双击即可快速…

使用naive-ui做一个标签页展示列表

目录 零、引言 一、引入所需组件 二、引入数据 三、使用动态样式控制列表条纹 四、全部代码 五、设计思路 5.1组件设计思路 5.2背景颜色控制思路 5.3说明 六。最终效果 零、引言 有时候我们会有很多数据&#xff0c;分成好几类 每一类都需要展示&#xff0c;那么这时…

win10配置单一python版本的sublime运行环境

①新建test.py输入下面代码 import sys print ("Python Version {}".format(str(sys.version).replace(\n, ))) ②Ctrlshiftp选择python ③按下CtrlB

中国唯一!华为入选Gartner®企业低代码应用平台魔力象限

近日&#xff0c;全球咨询机构Gartner发布 《Magic Quadrant™ for Enterprise Low-Code Application Platforms》报告&#xff0c;华为入选该象限&#xff0c;作为中国唯一入选厂商&#xff0c;华为已连续两年入选Gartner企业低代码应用平台魔力象限。 华为云Astro低代码平台采…

二百零三、Flume——Flume实时采集数据频率为1s的高频率Kafka数据直接写入ODS层表的HDFS文件路径下

一、目的 在离线数仓中&#xff0c;需要用Flume去采集Kafka中的数据&#xff0c;然后写入HDFS中。 由于每种数据类型的频率、数据大小、数据规模不同&#xff0c;因此每种数据的采集需要不同的Flume配置文件。玩了几天Flume&#xff0c;感觉Flume的使用难点就是配置文件 二、…

半平面求交 - 洛谷 - P3194 [HNOI2008] 水平可见直线

欢迎关注更多精彩 关注我&#xff0c;学习常用算法与数据结构&#xff0c;一题多解&#xff0c;降维打击。 往期相关背景点击前往 题目大意 题目链接 https://www.luogu.com.cn/problem/P3194 在直角坐标系中给定一些直线&#xff0c;然后从Y轴无穷大处往0处看&#xff0c;…

人工智能-深度学习之残差网络(ResNet)

随着我们设计越来越深的网络&#xff0c;深刻理解“新添加的层如何提升神经网络的性能”变得至关重要。更重要的是设计网络的能力&#xff0c;在这种网络中&#xff0c;添加层会使网络更具表现力&#xff0c; 为了取得质的突破&#xff0c;我们需要一些数学基础知识。 ResNet沿…

计算机毕业设计基于java+springboot+vue的实验室管理系统

项目介绍 系统中的功能模块主要是实现管理员&#xff1b;首页、个人中心、实验室管理、用户管理、实验室申请管理、设备管理、设备报备管理、设备申请管理、消耗品管理、消耗品领取管理、论坛管理、系统管理&#xff0c;用户前台&#xff1b;首页、实验室、设备、消耗品、论坛…

MySQL-- INNODB 引擎

1、INNODB引擎的逻辑存储的结构&#xff1a; 第一层的逻辑结构&#xff1a;表空间 一个mysql实例可以对应多个表空间&#xff0c;用于存储记录&#xff0c;索引数据。 第二层逻辑结构&#xff1a;段 分为数据段、索引段、回滚段、innodb是索引组织表&#xff0c;数据段是BTre…

基于JavaWeb+SpringBoot+Vue电子商城微信小程序系统的设计和实现

基于JavaWebSpringBootVue电子商城微信小程序系统的设计和实现 源码获取入口前言系统设计功能截图Lun文目录订阅经典源码专栏Java项目精品实战案例《500套》 源码获取 源码获取入口 前言 身处互联网时代&#xff0c;互联网无形中影响着人们的吃穿住行&#xff0c;人们享受着不…

2024年春季3月退役的大学生士兵免试专升本单独报名的新政策

关于2024年春季3月退役大学生士兵专升本免试单独报名安排的通知 2024年3月退役的符合条件的大学生士兵单独组织一次报名&#xff0c;网上报名时间另行通知&#xff0c;履行网上报名和信息确认手续&#xff0c;根据要求上传本人头像照片、身份证照片&#xff0c;以及《入伍通知书…

WorkPlus Meet视频会议系统,可私有化部署,保障内部数据安全

WorkPlus Meet作为一款私有化音视频会议平台&#xff0c;具有高度安全性和部署灵活性&#xff0c;能够根据参会人数进行灵活的调配&#xff0c;这样企业可以有效控制会议成本&#xff0c;避免资源浪费。同时&#xff0c;WorkPlus Meet平台支持多种功能&#xff0c;满足不同场景…

做决策、定战略、带团队:顶级高手常用的16个思维模型

01 做决策 1.沃伦巴菲特的双目标清单系统&#xff08;Two-List System&#xff09; 弗林特当了巴菲特的私人飞行员十年之久&#xff0c;还曾为美国四任总统开过飞机&#xff0c;但他在事业上依然有更多追求。有一次&#xff0c;他和巴菲特在探讨他的职业生涯目标时&#xff0…

第三方软件测试服务有哪些形式?选择时如何避雷?

高新技术的快速发展&#xff0c;人们对于软件产品越来越依赖&#xff0c;因此软件质量对于软件企业来说至关重要。产品质量的好坏需要通过检测才得知&#xff0c;软件企业为了获得更客观公正的检验结果&#xff0c;会将软件测试交由第三方软件测试服务机构进行?那么有哪些形式…

python采集小破站视频弹幕

嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! python更多源码/资料/解答/教程等 点击此处跳转文末名片免费获取 环境使用]: Python 3.8 Pycharm模块使用]: import requests 数据请求 import jieba 分词 import wordcloud 词云 import re 正则通过爬虫程序采集数据 分析数…