• 正则验证用户名和跨域postmessage

    目录

    正则验证用户名

    什么是正则表达式？

    示例用户名正则表达式

    跨域 postMessage

    发送窗口 

    接收窗口

    结论

    正则验证用户名

    什么是正则表达式？

    正则表达式是一种强大的字符串匹配工具。它允许我们定义一个模式，用来匹配字符串中的字符。对于用户名验证，我们可以创建一个正则表达式模式，定义用户名应满足的要求。

    示例用户名正则表达式

    以下是一个示例的用户名正则表达式，它要求用户名：

    • 由字母、数字和下划线组成。
    • 长度在3到20个字符之间。const usernameRegex = /^[a-zA-Z0-9_]{3,20}$/;

    当在网站或应用程序中要求用户提供用户名时，通常需要对用户名进行验证以确保其符合特定的规则。这是一个重要的安全步骤，以确保用户提供的数据是有效且不会引发安全问题。

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <title>用户名验证示例</title>
    5.     <style>
    6.         body {
    7.             font-family: Arial, sans-serif;
    8.             margin: 20px;
    9.         }
    10.     </style>
    11. </head>
    12. <body>
    13.     <h1>用户名验证示例</h1>
    14.  
    15.     <p>请提供用户名以验证：</p>
    16.     <input type="text" id="username" placeholder="输入用户名">
    17.     <button onclick="validateUsername()">验证用户名</button>
    18.     <p id="result"></p>
    19.  
    20.     <script>
    21.         function validateUsername() {
    22.             const usernameRegex = /^[a-zA-Z0-9_]{3,20}$/; // 定义用户名的正则表达式
    23.             const usernameInput = document.getElementById("username");
    24.             const resultMessage = document.getElementById("result");
    25.             const username = usernameInput.value;
    26.  
    27.             if (usernameRegex.test(username)) {
    28.                 resultMessage.textContent = "用户名有效。";
    29.                 resultMessage.style.color = "green";
    30.             } else {
    31.                 resultMessage.textContent = "用户名无效。用户名必须由字母、数字和下划线组成，长度在3到20个字符之间。";
    32.                 resultMessage.style.color = "red";
    33.             }
    34.         }
    35.     </script>
    36. </body>
    37. </html>

    ​

    创建了一个输入字段和一个验证按钮。当用户输入用户名并点击按钮时，会验证用户名是否符合指定的正则表达式模式。

    如果用户名符合这个模式，页面上会显示"用户名有效"，文字会呈现为绿色。如果用户名不符合模式，页面会显示"用户名无效"，文字会呈现为红色，并显示相应的验证规则。

    跨域 postMessage

    一种在不同域之间进行安全通信的方法，通常用于在嵌入式 iframes 之间或在不同窗口之间传递数据。

    发送窗口 

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <title>跨域 PostMessage 示例 - 发送窗口</title>
    5. </head>
    6. <body>
    7.     <h1>发送窗口</h1>
    8.     <button onclick="sendMessageToReceiver()">发送消息给接收窗口</button>
    9.  
    10.     <script>
    11.         function sendMessageToReceiver() {
    12.             const receiverWindow = document.getElementById("receiver-frame").contentWindow;
    13.             receiverWindow.postMessage("Hello from sender!", "https://receiver-domain.com");
    14.         }
    15.     </script>
    16.     
    17.     <iframe id="receiver-frame" src="https://receiver-domain.com"></iframe>
    18. </body>
    19. </html>

    ​

    接收窗口

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <title>跨域 PostMessage 示例 - 接收窗口</title>
    5. </head>
    6. <body>
    7.     <h1>接收窗口</h1>
    8.     <div id="message-container"></div>
    9.  
    10.     <script>
    11.         window.addEventListener("message", function(event) {
    12.             if (event.origin === "https://sender-domain.com") {
    13.                 const messageContainer = document.getElementById("message-container");
    14.                 messageContainer.innerHTML = "接收到消息: " + event.data;
    15.             }
    16.         });
    17.     </script>
    18. </body>
    19. </html>

    ​

    在设置了一个事件监听器，以监听 message 事件。当接收到消息时，我们检查 event.origin，以确保消息来自可信任的源。如果消息来自 "https://sender-domain.com"，则将消息显示在页面上。

    结论

    在网络开发中，用户名验证和跨域通信是两个重要的主题。通过使用正则表达式，可以有效地验证用户名。同时，使用PostMessage API，能够安全地实现跨域通信，使不同域的窗口能够相互传递数据。这两个主题都在网络应用开发中具有广泛的应用，是构建安全、功能丰富的应用程序的关键组成部分。

  • 相关阅读:
    Django是什么，有什么作用？
    UML类图简单认识
    基于springboot床上家纺用品网上销售系统的设计与实现-计算机毕业设计源码+LW文档
    前端ES6 面试过关宝典
    golang报错fatal error: all goroutines are asleep - deadlock
    ctf_show笔记篇（web入门---文件包含）
    【高阶数据结构】跳表
    设计模式——1. 单例模式
    产品经理就业喜报：沉舟侧畔终迎万木春
    ABB LDGRB-01 3BSE013177R1 数字量输入模块
  • 原文地址：https://blog.csdn.net/weixin_62304542/article/details/133685231