简单正则验证用户名和跨域postmessage

吃饭不带钱

已于 2024-04-15 19:33:41 修改

阅读量149

点赞数

文章标签：前端服务器

于 2023-10-09 13:16:05 首次发布

本文链接：https://blog.csdn.net/m0_62738649/article/details/133698789

版权

1.正则表达式
正则表达式是用于匹配字符串中字符组合的模式。正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文(匹配)。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等。

简单正则验证用户名:

<form action="new_file.html" method="get">
			<span>用户名：</span>
			<input type="text" name="name" required pattern="(^[a-zA-Z])[\w_]{3,8}$" minlength="4" maxlength="8" size="10"/>
			<input type="submit" value="注册"/>
		</form>

\\	^  匹配输入字符串的开始位置
\\  \w 匹配字母、数字、下划线。等价于 [A-Za-z0-9_]

测试结果：

2.跨域postmessage（跨域通信）：postMessage()方法允许来自不同源的脚本采用异步方式进行有效的通信，可以实现跨文本文档、多窗口、跨域消息传递，多用于窗口间数据通信，这也使它成为跨域通信的一种有效的解决方案。

首先创建两个html界面内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title父界面</title>
</head>
<body>
    <iframe id="myIframe" src="http://www.web2.com" frameborder="2"></iframe>
</body>
<script>
    window.onload=function(){
        //将cookie发送给子页面
        document.cookie='my first'
        const cookieDate=document.cookie
        //发送给子页面
        window.frames[0].postMessage(cookieDate,'http://www.web2.com')
    }
    window.addEventListener('message',(event)=>{
   //添加一个监听事件处理子页面的返回消息
        if(event.origin==='http://www.web2.com')
        console.log('received message from child:',event.data)
    })

</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>子页面</div>
</body>
<script>
    window.addEventListener('message',(event)=>{
        if(event.origin==='http://www.web1.com'){
            const cookieDate=event.data;
            console.log('receive message from parent:',cookieDate);
            window.parent.postMessage('child message','*')
        }
    })
</script>
</html>

子页面成功接收到父页面的cookie并打印