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>
相关推荐
持续前行7 分钟前
通过 npm 下载node_modules 某个依赖 ;例如 下载 @rollup/rollup-linux-arm64-gnu
前端·javascript·vue.js
无限进步_7 分钟前
【C++】巧用静态变量与构造函数:一种非常规的求和实现
开发语言·c++·git·算法·leetcode·github·visual studio
Advancer-10 分钟前
RedisTemplate 两种序列化实践方案
java·开发语言·redis
郝学胜-神的一滴18 分钟前
Socket实战:从单端聊天到多用户连接的实现秘籍
服务器·开发语言·python·网络协议·pycharm
小超超爱学习993724 分钟前
大数乘法,超级简单模板
开发语言·c++·算法
java1234_小锋29 分钟前
Java高频面试题:MyBatis如何实现动态数据源切换?
java·开发语言·mybatis
Embrace92431 分钟前
React Native + Realm 离线方案处理
javascript·react native·react.js·realm
knighthood200132 分钟前
Qt5.15+VTK9.3.0实现点云点选功能
开发语言·qt
墨神谕37 分钟前
Java中,为什么要将.java文件编译成,class文件,而不是直接将.java编译成机器码
java·开发语言
和小潘一起学AI1 小时前
CentOS 7安装Anaconda
开发语言·python