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>
相关推荐
小小晓.2 分钟前
零基础C++小白突破
开发语言·c++
zzqssliu4 分钟前
基于Laravel + Express.js的代购系统多语言多货币架构设计
javascript·express·laravel
何以解忧,唯有..5 分钟前
Go语言类型转换详解:从基础到进阶实践
开发语言·后端·golang
何以解忧,唯有..9 分钟前
Go 语言指针类型详解:从基础到实战
开发语言·后端·golang
天天爱吃肉821811 分钟前
豆包 vs DeepSeek API 对比分析报告
android·java·大数据·开发语言·功能测试·嵌入式硬件·汽车
geovindu22 分钟前
python: Reactor Pattern
开发语言·python·设计模式·反应器模式
水煮白菜王27 分钟前
高德地图"未获得商用授权"水印临时移除方案
前端·javascript
CS_SKILL27 分钟前
吉比特 C++ 实习一面面经:一轮把 C++、容器、并发、排序和网络全扫了一遍
java·开发语言·校招面经·实习面经·技术面经·吉比特校招
feifeigo12329 分钟前
基于多混沌映射的图像加密(MATLAB实现)
开发语言·matlab
chushiyunen29 分钟前
vue el-pagination实现分页
javascript·vue.js·elementui