正则验证用户名和跨域postmessage

最新推荐文章于 2024-10-10 21:13:48 发布

rubia--

最新推荐文章于 2024-10-10 21:13:48 发布

阅读量298

点赞数

分类专栏： web前端文章标签： mysql 服务器数据库前端

本文链接：https://blog.csdn.net/weixin_62304542/article/details/133685231

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

正则验证用户名

什么是正则表达式？

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

示例用户名正则表达式

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

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

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

<!DOCTYPE html>
<html>
<head>
    <title>用户名验证示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
    </style>
</head>
<body>
    <h1>用户名验证示例</h1>

    <p>请提供用户名以验证：</p>
    <input type="text" id="username" placeholder="输入用户名">
    <button onclick="validateUsername()">验证用户名</button>
    <p id="result"></p>

    <script>
        function validateUsername() {
            const usernameRegex = /^[a-zA-Z0-9_]{3,20}$/; // 定义用户名的正则表达式
            const usernameInput = document.getElementById("username");
            const resultMessage = document.getElementById("result");
            const username = usernameInput.value;

            if (usernameRegex.test(username)) {
                resultMessage.textContent = "用户名有效。";
                resultMessage.style.color = "green";
            } else {
                resultMessage.textContent = "用户名无效。用户名必须由字母、数字和下划线组成，长度在3到20个字符之间。";
                resultMessage.style.color = "red";
            }
        }
    </script>
</body>
</html>

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

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

跨域 `postMessage`

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

发送窗口

<!DOCTYPE html>
<html>
<head>
    <title>跨域 PostMessage 示例 - 发送窗口</title>
</head>
<body>
    <h1>发送窗口</h1>
    <button onclick="sendMessageToReceiver()">发送消息给接收窗口</button>

    <script>
        function sendMessageToReceiver() {
            const receiverWindow = document.getElementById("receiver-frame").contentWindow;
            receiverWindow.postMessage("Hello from sender!", "https://receiver-domain.com");
        }
    </script>
    
    <iframe id="receiver-frame" src="https://receiver-domain.com"></iframe>
</body>
</html>

接收窗口

<!DOCTYPE html>
<html>
<head>
    <title>跨域 PostMessage 示例 - 接收窗口</title>
</head>
<body>
    <h1>接收窗口</h1>
    <div id="message-container"></div>

    <script>
        window.addEventListener("message", function(event) {
            if (event.origin === "https://sender-domain.com") {
                const messageContainer = document.getElementById("message-container");
                messageContainer.innerHTML = "接收到消息: " + event.data;
            }
        });
    </script>
</body>
</html>