注册前后端php的检测
首先,在HTML表单中添加一个用于输入密码的文本框,并在其后面添加一个用于显示密码格式要求提示的元素,例如一个 <span>
标签。
<input type="password" id="passwordInput">
<span id="passwordHint"></span>
js
然后,在JavaScript代码中,监听密码输入框的输入事件,并根据输入内容判断是否符合要求,动态更新密码格式要求提示的内容。
// 获取密码输入框和密码提示元素
var passwordInput = document.getElementById("passwordInput");
var passwordHint = document.getElementById("passwordHint");// 监听密码输入框的输入事件
passwordInput.addEventListener("input", function () {// 获取密码var password = passwordInput.value;// 判断是否符合密码格式要求var hasLowercase = /[a-z]/.test(password); // 包含小写字母var hasNumber = /\d/.test(password); // 包含数字var hasSpecialChar = /[!@#$%^&*()\-_=+{}[\]\\|;:'",.<>/?]+/.test(password); // 包含特殊符号// 动态更新密码格式要求提示的内容var hint = "";if (!hasLowercase) {hint += "密码必须包含小写字母;";}if (!hasNumber) {hint += "密码必须包含数字;";}if (!hasSpecialChar) {hint += "密码必须包含特殊符号;";}passwordHint.textContent = hint;
});
上述代码中,使用正则表达式判断密码中是否包含小写字母、数字和特殊符号,然后根据判断结果动态更新密码格式要求提示的内容。提示信息会实时显示在页面上,根据用户输入的密码动态变化。
使用PHP来实现密码格式要求的提示,可以使用以下代码作为示例:
<?php
// 获取提交的密码
$password = $_POST['password'];// 判断密码是否符合要求
$hasLowercase = preg_match('/[a-z]/', $password); // 包含小写字母
$hasNumber = preg_match('/\d/', $password); // 包含数字
$hasSpecialChar = preg_match('/[!@#$%^&*()\-_=+{}[\]\\|;:\'",.<>\/?]+/', $password); // 包含特殊符号// 动态生成密码格式要求提示的内容
$hint = "";
if (!$hasLowercase) {$hint .= "密码必须包含小写字母;";
}
if (!$hasNumber) {$hint .= "密码必须包含数字;";
}
if (!$hasSpecialChar) {$hint .= "密码必须包含特殊符号;";
}// 输出密码格式要求提示
echo '<script>document.getElementById("passwordHint").textContent = "'. $hint .'";</script>';
?>
如果你的PHP代码和前端页面不在同一个文件中
可以使用以下方式将密码格式要求提示的内容传递到前端页面
- 在后端PHP文件中,定义一个变量来保存密码格式要求提示的内容。
<?php
// 获取提交的密码
$password = $_POST['password'];// 判断密码是否符合要求
$hasLowercase = preg_match('/[a-z]/', $password); // 包含小写字母
$hasNumber = preg_match('/\d/', $password); // 包含数字
$hasSpecialChar = preg_match('/[!@#$%^&*()\-_=+{}[\]\\|;:\'",.<>\/?]+/', $password); // 包含特殊符号// 动态生成密码格式要求提示的内容
$hint = "";
if (!$hasLowercase) {$hint .= "密码必须包含小写字母;";
}
if (!$hasNumber) {$hint .= "密码必须包含数字;";
}
if (!$hasSpecialChar) {$hint .= "密码必须包含特殊符号;";
}// 将密码格式要求提示的内容存储到一个变量中,供前端页面使用
$hintToDisplay = '<script>document.getElementById("passwordHint").textContent = "'. $hint .'";</script>';
?>
- 在前端页面中,使用PHP的
include
语句将后端PHP文件引入,并在需要显示密码格式要求提示的地方输出对应的内容。
<!-- 前端页面 -->
<html>
<head><title>密码格式示例</title>
</head>
<body><form action="check_password.php" method="post"><input type="password" name="password"><span id="passwordHint"></span><input type="submit" value="提交"></form><!-- 引入后端PHP文件,并输出密码格式要求提示的内容 --><?phpinclude 'backend.php';echo $hintToDisplay;?>
</body>
</html>
上述代码中,通过在前端页面使用include 'backend.php'
将后端PHP文件引入,然后使用echo $hintToDisplay
将密码格式要求提示的内容输出到对应的地方。
这种方式可以将后端生成的密码格式要求提示信息传输到前端页面进行显示。请确保引入后端PHP文件的路径是正确的,并根据具体情况修改文件名和路径。
// 获取密码输入框、注册按钮和密码提示元素
var passwordInput = document.getElementById("passwordInput");
var registerButton = document.getElementById("registerButton");
var passwordHint = document.getElementById("passwordHint");// 监听注册按钮的点击事件
registerButton.addEventListener("click", function (event) {// 阻止表单默认提交行为event.preventDefault();// 获取密码var password = passwordInput.value;// 判断是否符合密码格式要求var hasLowercase = /[a-z]/.test(password); // 包含小写字母var hasNumber = /\d/.test(password); // 包含数字var hasSpecialChar = /[!@#$%^&*()\-_=+{}[\]\\|;:'",.<>/?]+/.test(password); // 包含特殊符号// 动态更新密码格式要求提示的内容var hint = "";if (!hasLowercase) {hint += "密码必须包含小写字母;";}if (!hasNumber) {hint += "密码必须包含数字;";}if (!hasSpecialChar) {hint += "密码必须包含特殊符号;";}// 如果密码不符合要求,显示错误提示if (hint !== "") {passwordHint.textContent = hint;} else {// 密码符合要求,执行注册逻辑register();}
});// 注册逻辑
function register() {// 在这里执行注册的相关操作// ...// 提示注册成功等信息
}
相关文章:
注册前后端php的检测
首先,在HTML表单中添加一个用于输入密码的文本框,并在其后面添加一个用于显示密码格式要求提示的元素,例如一个 <span> 标签。 <input type"password" id"passwordInput"> <span id"passwordHint…...
Redis:什么是redis?①
一、思想 Redis是一个开源的高性能基于内存key-value数据库,常用作数据库、缓存或消息代理 二、数据类型 String List...
【课程】MyBatisPlus视频教程
MyBatis-Plus是一款非常强大的MyBatis增强工具包,只做增强不做改变. 在不用编写任何SQL语句的情况下即可以极其方便的实现单一、批量、分页等操作。 本套教程基于MyBatis-Plus新2.3版本,详细讲授:集成Mybatis-Plus、 通用CRUD、EntityWrapper条件构造器、ActiveRec…...

如何使用人工智能和ChatGPT来优化营销转化率
人工智能 (AI) 和营销的交集正在彻底改变企业与客户互动的方式,最终改变营销转化率。人工智能能够分析大量数据、理解模式和自动执行任务,它不仅是一项创新技术,而且是营销领域的根本性转变。这种转变允许更加个性化、…...
Ubuntu 22.04上构建libvirt源码错误解决
当在Ubuntu 22.04上构建libvirt源码时,可能会遇到一些错误。下面是一些常见错误及其解决方法: 1. 错误:Program xmllint’未找到或不可执行 解决方法:安装libxml2-utils sudo apt-get install libxml2-utils2. 错误:…...
游戏客户端面经
1,3D的模型怎么显示到2DUI上面 2,C#的ArryList和List的区别 3,接口和抽象类的区别,一般什么时候用接口 4,UGUI怎么渲染的UI,UGUI的层级管理(怎么不打断合批),合批流程…...
AS,idea,maven,gradle
Jdk,sdk。提前都是需要下好的。 Maven与gradle的思考: 用AS开发app时,gradle本就有,自己也可以指定,AGP同样。要注意gradle,AGP,jdk版本的事情。还有依赖库。 用idea开发网络程序时,也有内置的maven&…...

ElasTool v3.0 程序:材料弹性和机械性能的高效计算和可视化工具包
分享一个材料弹性和机械性能的高效计算和可视化工具包: ElasTool v3.0。 感谢论文的原作者! 主要内容 “弹性和机械性能的高效计算和可视化对于材料的选择和新材料的设计至关重要。该工具包标志着材料弹性和机械性能计算分析和可视化方面的重大进步…...

Redis入门级详解(一)
一、Redis入门介绍 1、什么是Redis? Redis,英文全称是Remote Dictionary Server(远程字典服务),是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库,并提供多种语言的API。…...
java算法题每日多道六
138. 随机链表的复制 题目 给你一个长度为 n 的链表,每个节点包含一个额外增加的随机指针 random ,该指针可以指向链表中的任何节点或空节点。 构造这个链表的 深拷贝。 深拷贝应该正好由 n 个 全新 节点组成,其中每个新节点的值都设为其对…...

C# 特性(Attribute)
C# 特性(Attribute) 文章目录 C# 特性(Attribute)Obsolete语法示例代码 创建自定义特性(Attribute) Obsolete 这个预定义特性标记了不应被使用的程序实体。它可以让您通知编译器丢弃某个特定的目标元素。例…...
Redis 教程系列之Redis 配置(三)
Redis 配置 Redis 的配置文件位于 Redis 安装目录下,文件名为 redis.conf(Windows 名为 redis.windows.conf)。 你可以通过 CONFIG 命令查看或设置配置项。 语法 Redis CONFIG 命令格式如下: redis 127.0.0.1:6379> CONFIG GET CONFIG_SETTING_NAME 实例 redis 127.0…...
Java实验03
Code1 package q3;public class Method01{public static void main(String[] args) {class Student{String name;String StuID;public Student(String name,String StuID){this.namename;this.StuIDStuID;}public void speak(String name, String stuID) {//输出学号与姓名Sys…...

安卓studio连接手机之后,一两秒之后就自动断开了。问题解决。
太坑了,安卓studio链接手机之后。几秒之后就断开了。我以为是adb的问题,就重新安装了一下adb。并且在环境变量中配置了Path的路径。然而并没有什么用啊。 经过排查原来是数据心虚了。线的接触不良。导致你刚接通的瞬间有相对较强的电流是因为有瞬间高电压…...
数字科技优化金融供给,内外协同激活新质生产力
来源 | 镭射财经(leishecaijing) 新一轮产业变革悄然发生,决定产业高度和竞争格局的底层生产力,也正在经历一场从量变到质变的跃迁。新质生产力则是这场跃迁后的最新呈现。 站在新质生产力爆发的时代拐点,金融业达成…...
「Linux系列」Shell 输入/输出重定向
文章目录 一、Shell 输入重定向二、Shell 输出重定向标准输出重定向:标准错误输出重定向:同时重定向标准输出和错误输出:禁用输出: 三、Shell 重定向命令输出重定向:错误输出重定向:标准输出和错误输出同时…...

java实现word转pdf
引入依赖包 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId><version>2.2.5.RELEASE</version></dependency><dependency><groupId…...

[flask] flask的基本介绍、flask快速搭建项目并运行
笔记 Flask Flask 本身相当于一个内核,其他几乎所有的功能都要用到扩展(邮件扩展Flask-Mail,用户认证Flask-Login,数据库Flask-SQLAlchemy),都需要用第三方的扩展来实现。比如可以用 Flask 扩展加入ORM、…...

设计编程网站集:生活部分:饮食+农业,植物(暂记)
这里写目录标题 植物相关综合教程**大型植物:****高大乔木(Trees):** 具有坚硬的木质茎,通常高度超过6米。例如,橡树、松树、榉树等。松树梧桐 **灌木(Shrubs):** 比乔木…...

搜索二维矩阵
题目链接 搜索二维矩阵 题目描述 注意点 每行中的整数从左到右按非严格递增顺序排列每行的第一个整数大于前一行的最后一个整数1 < matrix.length, matrix[0].length < 100 解答思路 先二分查找找到target所处的行,找到行后再二分查找找到target所处的列…...
零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?
一、核心优势:专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发,是一款收费低廉但功能全面的Windows NAS工具,主打“无学习成本部署” 。与其他NAS软件相比,其优势在于: 无需硬件改造:将任意W…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来,Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

黑马Mybatis
Mybatis 表现层:页面展示 业务层:逻辑处理 持久层:持久数据化保存 在这里插入图片描述 Mybatis快速入门 
从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路
进入2025年以来,尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断,但全球市场热度依然高涨,入局者持续增加。 以国内市场为例,天眼查专业版数据显示,截至5月底,我国现存在业、存续状态的机器人相关企…...
oracle与MySQL数据库之间数据同步的技术要点
Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异,它们的数据同步要求既要保持数据的准确性和一致性,又要处理好性能问题。以下是一些主要的技术要点: 数据结构差异 数据类型差异ÿ…...
土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等
🔍 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术,可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势,还能有效评价重大生态工程…...

前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包(Closure)?闭包有什么应用场景和潜在问题?2.解释 JavaScript 的作用域链(Scope Chain) 二、原型与继承3.原型链是什么?如何实现继承&a…...
汇编常见指令
汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX(不访问内存)XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...
Typeerror: cannot read properties of undefined (reading ‘XXX‘)
最近需要在离线机器上运行软件,所以得把软件用docker打包起来,大部分功能都没问题,出了一个奇怪的事情。同样的代码,在本机上用vscode可以运行起来,但是打包之后在docker里出现了问题。使用的是dialog组件,…...

初学 pytest 记录
安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...