正则验证用户名和跨域postmessage

最新推荐文章于 2023-10-09 20:59:30 发布

爱踢球的小方

最新推荐文章于 2023-10-09 20:59:30 发布

阅读量137

点赞数 1

文章标签： html5 正则表达式

本文链接：https://blog.csdn.net/m0_69550154/article/details/133682037

版权

一，正则验证用户名

如果用户名输入合法, 则后面提示信息为 : 用户名合法,并且颜色为绿色
如果用户名输入不合法, 则后面提示信息为: 用户名不符合规范, 并且颜色为红色

<body>
  <input type="text" class="uname"> <span>请输入用户名</span>
  <script>
      //  量词是设定某个模式出现的次数
      var reg = /^[a-zA-Z0-9_-]{6,16}$/; // 这个模式用户只能输入英文字母 数字 下划线 短横线但是有边界符和[] 这就限定了只能多选1
    
      var uname = document.querySelector('.uname');
      var span = document.querySelector('span');
      uname.onblur = function() {
          if (reg.test(this.value)) {
              console.log('正确的');
              span.className = 'right';
              span.innerHTML = '用户名格式输入正确';
          } else {
              console.log('错误的');
              span.className = 'wrong';
              span.innerHTML = '用户名格式输入不正确';
          }
      }
  </script>
</body>

二，跨域postmessage

首先启动E:/前端/www/index.html和E:/前端/www/B.HTML进行信息跨越传递

<body>
 <iframe src="E:/前端/www/B.HTML" frameborder="0" id="frame" "load()"></iframe>
 <script type="text/javascript">
  function load(){
   let frame = document.querySelector('#frame');
   console.log(frame);
  }
  window.onmessage = function(e){
   console.log(e.data)
  }
 </script>
</body>

<body>
 你好，我是爱踢球的小方
 <script type="text/javascript">
  window.onmessage = function(e){
   console.log('eeeeeeeee',e)
   console.log(e.data);
   //向父级（发射源）发送消息
   e.source.postMessage('你好','E:/前端/www/index.html');
  }
 </script>
</body>

结果

结果在E:/前端/www/B.HTML中输入想要的字符在E:/前端/www/index.html中可以进行消息传递。

爱踢球的小方

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
正则验证用户名和跨域postmessage

结果在E:/前端/www/B.HTML中输入想要的字符在E:/前端/www/index.html中可以进行消息传递。首先启动E:/前端/www/index.html和E:/前端/www/B.HTML进行信息跨越传递。如果用户名输入不合法, 则后面提示信息为: 用户名不符合规范, 并且颜色为红色。如果用户名输入合法, 则后面提示信息为 : 用户名合法,并且颜色为绿色。二，跨域postmessage。一，正则验证用户名。
复制链接

扫一扫