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

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

//body部分

<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>
1
2
3
4
5
6
7
8
9
10
11
12

//css部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

//另外一种是事件委托，来验证各input项

//首先获取的是id="myList"的ul行，这是所有input行的父节点，由于冒泡的原因
//只需要在父节点添加事件，即可以处理每行input的值，达到节省内存减少资源，只不过事件变为了focusout
//同样li最后也不能赋值null,因为pwd行要获取值比较
 var li=document.getElementById("myList");
  EventUtil.addHandler(li,"focusout",function(event){
   var event=EventUtil.getEvent(event);
   var target=EventUtil.getTarget(event);
   var message,pass;
   switch(target.name)
     {
       case "user":
         
          if(target.value=="")
          {
           target.focusout;
           message="不能为空";
           msg(message);
          }else if(target.value.length<5 || target.value.length >20)
          {
           message="5-20个字符";
           msg(message);
          }
         
         break;
       case "password":
        
           if(target.value=="")
           {
             message="密码不能为空";
             msg(message);
           }else if(target.value.length<6)
           {
             message="密码至少6位字符";
             msg(message);
           }
            

         break;
       case "pwd":
         
           if(target.value=="")
           {
             message="重复密码不能为空";
             msg(message);
            
           }else if(target.value != li.children[1].children[0].value)
           {
             message="两次密码不一致";
             msg(message);
             
           }
           
         break;
       case "tel":
         
           if(target.value=="")
           {
             message="手机号不能为空";
             msg(message);
           }else if(!/^1[3|7|5|4|8][0-9]{9}$/.test(target.value) || target.value.length<11)
           {
             message="手机号码不正确";
             msg(message);
           }
         
         break;
       case "email":
         
           if(target.value=="")
           {
             message="邮箱不能为空";
             msg(message);
           }else if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*.\w+([-.]\w+)$/.test(target.value.trim()))
           {
             message="邮箱格式不正确";
             msg(message);
           }
         
         break;
     }
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81