javascript 进行邮箱正则验证,将验证按钮与 回车键绑定遇到问题

发布于 2022-09-12 04:36:36 字数 3786 浏览 35 评论 0

   最近新学习了javascr1ipt ,写了 一个邮箱验证,我想将邮箱验证按钮和回车键绑定在一起;
   遇到的问题, 在光标移开邮箱填写栏后任然需要点击验证按钮再回车才能显示验证结果;
 &ems; 想要效果 希望在光标移开邮箱填写栏后,直接点击回车键;得到验证的结果;

     javascript 部分代码

   <script type="text/javascript">
             window.onload=function(){
                 // 当邮箱填写完成后
                  document.getElementById("email").onblur=function(){
                      // 当开始按下键盘后
                        document.getElementById("btn").onkeydown=function(event){
                             if(event.keyCode==13){
                                    //拿到邮箱;
                                   var emails=document.getElementById("email").value;
                                   // 创建正则;
                                   var emailEegExp=/^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/;
                                   //经行验证;
                                   if( !emailEegExp.test(emails)){
                                // 显示验证结果;
                                    document.getElementById("errorMessage").innerText="填写邮箱有误";
                                   }
                                 
                             }
                            
                        }
                      
                  }
                  //重新填写
                  document.getElementById("email").onfocus=function(){
                      
                        document.getElementById("errorMessage").innerText="";
                  }
                 
             }
            
            
        </script>
        

   全部代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>邮箱正则验证</title>
    </head>
    <body>
        
        <script type="text/javascript">
             window.onload=function(){
                 // 当邮箱填写完成后
                  document.getElementById("email").onblur=function(){
                      // 当开始按下键盘后
                        document.getElementById("btn").onkeydown=function(event){
                             if(event.keyCode==13){
                                    //拿到邮箱;
                                   var emails=document.getElementById("email").value;
                                   // 创建正则;
                                   var emailEegExp=/^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/;
                                   //经行验证;
                                   if( !emailEegExp.test(emails)){
                                // 显示验证结果;
                                    document.getElementById("errorMessage").innerText="填写邮箱有误";
                                   }
                                 
                             }
                            
                        }
                      
                  }
                  //重新填写
                  document.getElementById("email").onfocus=function(){
                      
                        document.getElementById("errorMessage").innerText="";
                  }
                 
             }
            
            
        </script>
        
        <input type="text" name="" id="email" value="" />
        <span id="errorMessage"  style="color: red; font-size: 17px;">  </span>
        <br>
        <input type="button" name="" id="btn" value="邮箱验证" />
        
    </body>
</html>

  有大神能够告诉我为什么我在光标移开邮箱填写栏之后任然需要点击验证按钮再按下回车键才能完成验证呢???

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

沩ん囻菔务 2022-09-19 04:36:36

只有获得焦点的元素才能监听键盘事件
即便你的邮箱填写框已经失去焦点,焦点可能回到了 window 上,即只有 window 可以监听到键盘事件,所以你可以在修改按钮的 onkeydown 之前把焦点给按钮:

const btn = document.getElementById("btn");
btn.focus();
// 当开始按下键盘后
btn.onkeydown = //...
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文