为了账号安全,请及时绑定邮箱和手机立即绑定

在学习js制作表单登录界面遇到的问题

我发现一个问题,在登录框输入正确的登录名后,我单击输入框外面,登录框是提示成功了,但是当我没有改变登录框中的值,只是在框中单击了一下,在再登录框外面单击一下,登录框就提示我输入的登录名不合法了,这是怎么回事呢?怎么处理这个问题呢?


正在回答

3 回答

这个是正则使用的问题。

        var pw = /^[a-zA-Z]{1}[\w\d]{4,7}$/g;
//当鼠标离开时发生的事件
//判断登录名事件
        d_input.onblur = function () {
            var re = /^[\u4e00-\u9fa5]{3}$/g;
            if (re.test(this.value)) {
                dp.innerHTML = "OK!";
                dp.style.color = "green";
                d_i.style.visibility = "hidden";
            } else if (this.value == "") {
                dp.innerHTML = "登录名不能为空!";
                dp.style.color = "red";
                d_i.style.visibility = "hidden";
            }else {
                dp.innerHTML = "登录名使用三个中文";
                dp.style.color = "red";
            }
        };

这里是把

var re = /^[\u4e00-\u9fa5]{3}$/g;   //移动到了d_input.onblur里面。

因为如果放到外面的话  re.test(this.value) 的值会一次true 一次false  交替着出现。即使this.value的值一直是3个中文。详细的原因你可以去查一下正则表达的用法 ,尤其是关于全局匹配的(g)

0 回复 有任何疑惑可以回复我~
#1

qq_小柯_1 提问者

好的,我这就去查看,谢啦!!☆⌒(*^-゜)v
2015-11-05 回复 有任何疑惑可以回复我~

html代码

58.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>Document</title>

<link rel="stylesheet" type="text/css" href="58.css">

<script type="text/javascript" src="58.js"></script>

</head>

<body>

<div id="main">

<div>

<label>

<span>

&nbsp;&nbsp;登录名:

</span>

<input type="text"/>

</label>

<p>只能输入三个中文名作为登录名!</p>

<i>0个中文</i>

</div>

<div>

<label>

<span>

&nbsp;&nbsp;&nbsp;&nbsp;密码:

</span>

<input type="text"/>

</label>

<p >要求密码在5到8个字符之间,不能为中文,开头为英文,其余的是数字或者为英文</p>

   <i>0个字符</i>

</div>

<div>

<label>

<span>

确认密码:

</span>

<input type="password"/>

</label>

<p></p>

</div>

<input type="submit" id="submit"/>

</div>

</body>

</html>

58.js

//排除是否全是数字或者一个字符

function getStr(str,n){

var num=0;

for(var i=0;i<str.lengthl;i++){


if(str.charAt(i)==n){

                 num++;

}

}

return num;

}

//若为汉字这以两个字符计算

function getLength(str){

return str.replace(/[^\x00-xff]/g,"xx").length;

}

var length=0;

       window.onload=function(){

          //获取P的对象集合

          var ps=document.getElementsByTagName("p");

          //获取登录名的提示语

          var dp=ps[0];

          //获取密码的提示语

          var pp=ps[1];

          //获取确认密码的提示语

          var zpp=ps[2];


          //获取input的对象集合

          var inputs=document.getElementsByTagName("input");

          //获取登录名的对象

          var d_input=inputs[0];

          //获取密码框对象

          var p_input=inputs[1];

          //获取确认密码框对象

          var zp_input=inputs[2];

          //获取计数i的对象集合

          var counts=document.getElementsByTagName("i");

          //获取登录名的计数i的个数

          var d_i=counts[0];

          //获取密码的计数个数

          var pw_i=counts[1];

       


          //鼠标进入到登录框时提示语出现

          d_input.onfocus=function(){

          dp.style.visibility="visible";

          };

          //鼠标进入密码框时提示语出现

          p_input.onfocus=function(){

          pp.style.visibility="visible";

          };

          //匹配登录名的正则表达式

          var re=/^[\u4e00-\u9fa5]{3}$/g;

          var pw=/^[a-zA-Z]{1}[\w\d]{4,7}$/g;

        

        

          //当鼠标离开时发生的事件

          //判断登录名事件

         d_input.onblur=function(){

           if(re.test(this.value)){

            dp.innerHTML="OK!";

            dp.style.color="green";

            d_i.style.visibility="hidden";

           }else if(this.value==""){

            dp.innerHTML="登录名不能为空!";

            dp.style.color="red";

            d_i.style.visibility="hidden";

           }

           else{

            dp.innerHTML="登录名使用三个中文";

            dp.style.color="red";

           }

         };

         //密码框鼠标离开时判断密码是否错误

       p_input.onblur=function(){

         if(pw.test(this.value)){

          pp.innerHTML="OK!";

            pw_i.style.visibility="hidden";

          pp.style.color="green";

         }else if(this.value==""){

            pw_i.style.visibility="hidden";

            pp.innerHTML="密码不能为空!";

            pp.style.color="red";

          }

          else{

          pp.innerHTML="5到8个字符之间,不能为中文,开头为英文,其余的是数字或者为英文";

          pp.style.color="red";

         }

       };

        //登录名的中文个数记录

        d_input.onkeyup=function(){

        d_i.style.visibility="visible";

        var length=getLength(this.value);

            d_i.innerHTML=length/2+'个中文';

            if(length==1){

            d_i.style.visibility="hidden";

            }

        };

     //密码的字符个数记录

     p_input.onkeyup=function(){

         pw_i.style.visibility="visible";

         var length=getLength(this.value);

         pw_i.innerHTML=length+'个字符';

     };

     //再次确认密码是否匹配

     zp_input.onblur=function(){

         if(this.value==p_input.value){

             zpp.style.visibility="visible";

             zpp.innerHTML="OK!";

             zpp.style.color="green";

         }else if(this.value==""){

         zpp.style.visibility="visible";

          zpp.innerHTML="确认密码不能为空!";

          zpp.style.color="red";


         }else{

          zpp.style.visibility="visible";

          zpp.innerHTML="您输入的密码不一致!";

          zpp.style.color="red";

         }

     };

58.css

 div,body,label,p,span{

          margin: 0px;

          padding: 0px;

          }

          #main{

          width: 950px;

          height:400px;

          margin-left: 400px;

          margin-top: 100px;

          }

          #main div{

          float: left;

          margin-left: 10px;

          width: 930px;

          height: 90px;

          }

         #main label{

          float: left;

          font-size: 36px;

          margin-top: 20px;

         }

         #main input{

          width: 150px;

          height: 30px;

         }

         #main p{

          margin-top: 40px;

          visibility: hidden;

         }

       #submit{

        float: left;

        margin-left: 180px;

       }

       .count{

        float: left;

        clear: both;

        margin-left:230px;

        display: block;

        visibility: hidden;



       }


       };


0 回复 有任何疑惑可以回复我~

出了问题最好是贴一下代码,别人才能看出原因,猜出来的可能性不大。

0 回复 有任何疑惑可以回复我~
#1

qq_小柯_1 提问者

嗯呢,我这就贴
2015-11-04 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
表单验证
  • 参与学习       53333    人
  • 解答问题       253    个

表单验证是JavaScript中的高级选项之一,输入框的验证

进入课程

在学习js制作表单登录界面遇到的问题

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信