正则验证用户名和跨域postmessage

一、正则验证用户名

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录</title>
</head>
<body>
<form action="/login" method="post"><input type="text" name="username" placeholder="用户名"><input type="submit" value="登录">
</form><script>function validateUsername() {var username = document.querySelector("input[name='username']").value;// 使用正则表达式验证用户名var reg = /^[a-zA-Z]+$/;if (!reg.test(username)) {alert("用户名必须是纯字母!");document.querySelector("input[name='username']").value = "";}}document.querySelector("input[name='username']").addEventListener("change", validateUsername);
</script>
</body>
</html>

运行结果

二、跨域postmessage

先配置好一个虚拟主机

然后对两个网站分别进行配置

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>2023</title>
</head><div><h1>www.dg.com</h1></div>
</body>
<script>window.addEventListener('message', (event) => {if (event.origin === 'http://www.dg2.cn') {const cookieData = event.data;//处理cookieDataconsole.log('Receive message from parent:', cookieData);window.parent.postMessage('child message', '*');}})
</script></html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>iframe</title>
</head>
<body><iframe id="myIframe" src="http://dg.com/" frameborder="0"></iframe>
</body>
<script>window.onload = function() {document.cookie = 'sessionid=oupeng'const cookieData = document.cookiewindow.frames[0].postMessage(cookieData, 'http://dg.com/');}//添加一个监听事件处理子页面的返回消息window.addEventListener('message', (event) => {if(event.origin === 'http://dg.com')console.log('Received message from child:', event.data);})
</script>
</html>

运行结果

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

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

相关文章

蓝桥杯每日一题2023.10.2

时间显示 - 蓝桥云课 (lanqiao.cn) 题目描述 题目分析 输入为毫秒&#xff0c;故我们可以先将毫秒转化为秒&#xff0c;由于只需要输出时分&#xff0c;我们只需要将天数去除即可&#xff0c;可以在这里多训练一次天数判断 #include<bits/stdc.h> using namespace std…

【网络安全 --- kali2023安装】超详细的kali2023安装教程(提供镜像资源)

如果你还没有安装vmware 虚拟机&#xff0c;请参考下面博客安装 【网络安全 --- 工具安装】VMware 16.0 详细安装过程&#xff08;提供资源&#xff09;-CSDN博客【网络安全 --- 工具安装】VMware 16.0 详细安装过程&#xff08;提供资源&#xff09;https://blog.csdn.net/m0…

python代码封装二进制文件并使用C#调用方案

思路 首先使用Cython库将python代码生成二进制文件pyd&#xff0c;然后使用C#中的pythonnet的Nuget包来进行调用&#xff0c;python代码中可以使用第三方类库。 Cython使用 Cython的安装 在命令行中使用如下语句即可安装Cython pip install cythonpyd文件格式 Cython用于…

openGauss学习笔记-93 openGauss 数据库管理-访问外部数据库-oracle_fdw

文章目录 openGauss学习笔记-93 openGauss 数据库管理-访问外部数据库-oracle_fdw93.1 编译oracle_fdw93.2 使用oracle_fdw93.3 常见问题93.4 注意事项 openGauss学习笔记-93 openGauss 数据库管理-访问外部数据库-oracle_fdw openGauss的fdw实现的功能是各个openGauss数据库及…

Umijs介绍

今天我们来看 umijs 我们访问官网 https://umijs.org/ 这是一个可 插拔的企业级 React框架 当然 你也可以选择 React 的一个脚手架 但是 这样就有很多需要考虑的东西 用这个umi 很多点 我们就不需要考虑了 框架已经帮我们配置好了 这边 我们点击快速上手的一个 指南 我们可…

数据结构刷题训练——二叉树篇(一)

&#x1f4d9;作者简介&#xff1a; 清水加冰&#xff0c;目前大二在读&#xff0c;正在学习C/C、Python、操作系统、数据库等。 &#x1f4d8;相关专栏&#xff1a;C语言初阶、C语言进阶、C语言刷题训练营、数据结构刷题训练营、有感兴趣的可以看一看。 欢迎点赞 &#x1f44d…

贪心找性质+dp表示+矩阵表示+线段树维护:CF573D

比较套路的题目 首先肯定贪心一波&#xff0c;两个都排序后尽量相连。我一开始猜最多跨1&#xff0c;但其实最多跨2&#xff0c;考虑3个人的情况&#xff1a; 我们发现第3个人没了&#xff0c;所以可以出现跨2的情况 然后直接上dp&#xff0c;由 i − 1 , i − 2 , i − 3 i…

谷歌浏览器驱动下载

谷歌浏览器驱动下载 在使用selenium进行网页操作的时候通常会用到驱动器。以下是谷歌浏览器驱动下载方式。 谷歌浏览器驱动下载链接&#xff1a;https://chromedriver.chromium.org/downloads 打开连接后按照下图步骤进行操作&#xff1a; 查找出自己谷歌浏览器版本后根据以…

【单元测试】如何使用 JUnit5 框架?

JUnit5 单元测试框架使用教程 一、Junit5 是什么&#xff1f; Junit5是一个用于在Java平台上进行单元测试的框架。JUnit 5 框架主要由三部分组成&#xff1a;JUnit Platform、JUnit Jupiter 和 JUnit Vintage。 JUnit Platform&#xff1a;定义了测试引擎的 API&#xff0c;是…

[yolo系列:yolov7添加可变形卷积Deformable Conv V2]

yolo系列文章目录 文章目录 yolo系列文章目录一、可变形卷积是什么&#xff1f;二、使用步骤1.在models/common.py文件添加2.然后再yolo.py里面添加DCNv23.修改yolov7的yaml 总结参考文章 一、可变形卷积是什么&#xff1f; 可变形卷积即DCN&#xff08;缩写取自Deformable Con…

天启科技联创郭志强:趟遍教育行业信数化沟坎,创业智能赛道重塑行业生态

郭志强 天启科技联合创始人 近20年互联网、企业信息化、数字化实施、管理及培训经验。对于集团型企业及初创企业、传统企业及互联网企业的信息化、数字化转型有自己独到的见解和实操经验。具备跨区域、集团化信息规划、解决方案、系统架构及企业流程搭建、优化和技术团队管理能…

leetCode 674. 最长连续递增序列 动态规划 / 贪心策略

674. 最长连续递增序列 - 力扣&#xff08;LeetCode&#xff09; 给定一个未经排序的整数数组&#xff0c;找到最长且 连续递增的子序列&#xff0c;并返回该序列的长度。 连续递增的子序列 可以由两个下标 l 和 r&#xff08;l < r&#xff09;确定&#xff0c;如果对于每…

Qt之实现圆形进度条

在Qt自带的控件中&#xff0c;只有垂直进度条、水平进度条两种。 在平时做页面开发时&#xff0c;有些时候会用到圆形进度条&#xff0c;比如说&#xff1a;下载某个文件的下载进度。 展示效果&#xff0c;如下图所示&#xff1a; 实现这个功能主要由以下几个重点&#xff1a…

php 安装mongodb扩展模块,rdkafka模块

mongodb mongodb扩展下载 选择php版本&#xff0c;根据报错提示&#xff0c;选择扩展对应的版本选择非安全进程将php_mongodb.dll放到php/ext目录下修改php.ini配置&#xff0c;添加extensionphp_mongodb.dll开启php_mongodb扩展&#xff0c;重启服务php -m 查看是否开启成功…

整理mongodb文档:副本集二

个人博客 整理mongodb文档:副本集二 个人博客&#xff0c;求推荐&#xff0c;本片内容较为乱 文章概叙 本文章主要讲在MongoDB的副本集中的一些注意点&#xff0c;主要是如何对seconadry进行数据操作&#xff0c;以及对更新数据的一些介绍 查看当前节点 上一集讲了关于搭…

Git指导:提交干净的commit信息

为什么我们应该关心编写干净的提交消息&#xff1f; 提交是程序员技术的有形构建块。它们充当代码的锦上添花&#xff0c;如果编写正确&#xff0c;它们会带来巨大的价值。编写良好的提交消息变得不可或缺&#xff0c;因为它们提供了上下文——否则一开始就不需要提交消息。 良…

STM32 CubeMX ADC采集(HAL库)

STM32 CubeMX ADC采集&#xff08;HAL库&#xff09; STM32 CubeMX STM32 CubeMX ADC采集&#xff08;HAL库&#xff09;ADC介绍ADC主要特征最小识别电压值&#xff1a;2.4/4096≈0.6mv&#xff08;不考虑误差&#xff09;一、STM32 CubeMX设置二、代码部分三&#xff0c;单通道…

黑马JVM总结(二十八)

&#xff08;1&#xff09;语法糖-foreach &#xff08;2&#xff09;语法糖-switch-string &#xff08;3&#xff09;语法糖-switch-enum &#xff08;4&#xff09;语法糖-枚举类 枚举类 &#xff08;5&#xff09;语法糖-twr1

Linux登录自动执行脚本

一、所有用户每次登录时自动执行。 1、在/etc/profile文件末尾添加。 将启动命令添加到/etc/profile文件末尾。 2、在/etc/profile.d/目录下添加sh脚本。 在/etc/profile.d/目录下新建sh脚本&#xff0c;设置每次登录自动执行脚本。有用户登录时&#xff0c;/etc/profile会遍…

【Leetcode】 51. N 皇后

按照国际象棋的规则&#xff0c;皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题 研究的是如何将 n 个皇后放置在 nn 的棋盘上&#xff0c;并且使皇后彼此之间不能相互攻击。 给你一个整数 n &#xff0c;返回所有不同的 n 皇后问题 的解决方案。 每一种…