javascript注册表单与验证，然后弹出错误信息，3秒后自动消失

javascript 复制代码

<script type="text/javascript">
				//获取到所有的input元素，不能input=null,因为input['password'].value要与input['pwd'].value进行比较
				//也可以input=null;不过要在局域变量设置变量var pass=input['password'],然后再进行比较
              var input=document.getElementsByTagName("input");
              var i,len,message;
              for(i=0,len=input.length-1;i<len;i++)
              {
                
                switch(input[i].name)
                {
                  case "user":
                    
                    EventUtil.addHandler(input[i],"blur",function(event){
                      
                     if(this.value=="")
                     {
                        
                      message="不能为空";
                      msg(message);
                     }else if(this.value.length<5 || this.value.length >20)
                     {
                      message="5-20个字符";
                      msg(message);
                     }
                    });
                    break;
                  case "password":
                    EventUtil.addHandler(input[i],"blur",function(){
                      if(this.value=="")
                      {
                        message="密码不能为空";
                        msg(message);
                      }else if(this.value.length<6)
                      {
                        message="密码至少6位字符";
                        msg(message);
                      }
                    });
                    break;
                  case "pwd":
                    EventUtil.addHandler(input[i],"blur",function(){
                      if(this.value=="")
                      {
                        message="重复密码不能为空";
                        msg(message);
                      }else if(this.value!=input["password"].value)
                      {
                        message="两次密码不一致";
                        msg(message);
                      }
                    });
                    break;
                  case "tel":
                    EventUtil.addHandler(input[i],"blur",function(){
                      if(this.value=="")
                      {
                        message="手机号不能为空";
                        msg(message);
                      }else if(!/^1[3|7|5|4|8][0-9]{9}$/.test(this.value) || this.value.length<11)
                      {
                        message="手机号码不正确";
                        msg(message);
                      }
                    });
                    break;
                  case "email":
                    EventUtil.addHandler(input[i],"blur",function(){
                      if(this.value=="")
                      {
                        message="邮箱不能为空";
                        msg(message);
                      }else if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*.\w+([-.]\w+)$/.test(this.value.trim()))
                      {
                        message="邮箱格式不正确";
                        msg(message);
                      }
                    });
                    break;
                }
              }
             //显示错误信息函数
              function msg(message)
              {
              //获取到弹出提示的div元素
                var content=document.getElementById("popcontent");
                //创建div元素中的文件信息
                var text=document.createTextNode(message);
                
                content.style.left="50%";
                content.style.top="10%";
                content.style.color="#fff";
                content.style.zIndex="1000";
                content.style.width="150px";
                content.style.height="35px";
                content.style.borderRadius="5px";
                content.style.opacity="0.3";
                content.style.textAlign="center";
                content.style.visibility="visible";
                content.style.lineHeight="2em";
                //把错误信息赋值给div元素，这里用的innerText,用appendChild()插入，信息会重复
                content.innerText=message;
                //设计消失信息时间为3秒，并清除content\text引用释放内存
                setTimeout(function(){
                  content.style.visibility="hidden";
                  content=null;
                  text=null;
                },3000);
               
              }
              
              
              
           
           </script>

//body部分

html 复制代码

<div id="container">
              <div id="mydiv">用户注册</div>
              <ul id="myList">
                <li>账户：<input type="text" name="user" value="" title="填写你要注册的用户名" size=20/></li>
                <li>密码：<input type="password" name="password" value="" size=20/> </li>
                <li>重复：<input type="password" name="pwd" value="" size=20/></li>
                <li>手机：<input type="text" name="tel" value="" size=20/></li>
                <li>邮箱：<input type="text" name="email" value="" size=20/> </li>
                <li><input type="button" name="submit" value="注册"/> </li>
              </ul>
              <div id="popcontent" style="background-color:rgba(0,0,0,1);position:absolute;visibility:hidden;"></div>
              </div>

//css部分

css 复制代码

<style type="text/css">
            #container
            {
              width: 600px;
              margin: 0 auto;
              border: solid 1px red;
              z-index: -1;
            }
            #container #myList
            {
              list-style: none;
              margin: 0;
              padding: 0;
            }
            #container #myList li
            {
              margin-top: 20px;
              margin-left:10px;
            }
            #myList li input
            {
              width:200px;
              border-radius: 5px;
              margin-left: 10px;
              height: 25px;
            }
            #myList li:last-child
            {
              text-align: center;
            }
            #myList input[name=submit]
            {
              width: 50px;
              height: 30px;
            }
            
            
        </style>