注册验证

验证邮箱、用户名、密码等

html代码:

<div class="register_message">
            <form action="" method="post" id="myform" οnsubmit="return checkRegister()">
                <dl class="register_row">
                    <dt>Email地址:</dt>
                    <dd>
                        <input id="email" type="text" class="register_input" onFocus="emailFocus()" onBlur="emailBlur()"/>
                        
                    </dd>
                    <dd><div id="email_prompt"></div></dd>

                    
                </dl>
                <dl class="register_row">
                    <dt>设置昵称:</dt>
                    <dd>
                        <input id="nickName" type="text" class="register_input" onFocus="nickNameFocus()" onBlur="nickNameBlur()"/>
                        
                    </dd>
                    <dd><div id="nickName_prompt"></div></dd>

                </dl>
                <dl class="register_row">
                    <dt>设定密码:</dt>
                    <dd>
                        <input id="pwd" type="password" class="register_input" onFocus="pwdFocus()" onBlur="pwdBlur()"/>
                        
                    </dd>
                    <dd><div id="pwd_prompt"></div></dd>

                </dl>
                <dl class="register_row">
                    <dt>再输入一次密码:</dt>
                    <dd><input id="repwd" type="password" class="register_input" onFocus="repwdFocus()" onBlur="repwdBlur()"/></dd>
                    <dd><div id="repwd_prompt"></div></dd>

                </dl>
                <dl class="register_row">
                    <dt>性别:</dt>
                    <dd><input name="sex" id="man" type="radio" value="男" checked="checked"/> <label for="man">男</label></dd>
                    <dd> <input name="sex" id="woman" type="radio" value="女"/> <label for="woman">女</label></dd>
                </dl>

 <div class="registerBtn"><input id="registerBtn" type="image" src="images/register_btn_out.gif"/></div>
            </form>
        </div>

JS代码:

<script>
        // JavaScript Document
        
        /*鼠标在email文本框中时*/
        function emailFocus(){
            var email=document.getElementById("email");//定义一个email对象
            var promptId=document.getElementById("email_prompt");
            email.className="register_input register_input_Focus";
             promptId.className="register_prompt";
        }
            
        /*鼠标离开email文本框中时*/    
        function emailBlur(){
            var email=document.getElementById("email");
            var promptId=document.getElementById("email_prompt");
            promptId.innerHTML="";
            var reg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;    //正则表达式
            if(email.value==""){
                promptId.innerHTML="电子邮件是必填项,请输入您的Email地址";
                promptId.className="register_prompt_error";
                email.className="register_input register_input_Blur";
                return false;
                  }
                if(reg.test(email.value)==false){
                promptId.innerHTML="电子邮件格式不正确,请重新输入";
                promptId.className="register_prompt_error";
                email.className="register_input register_input_Blur";
            return false;
              }
              
              promptId.className="register_prompt_ok";
              email.className="register_input";
              return true;
        }
        
        /*鼠标在昵称文本框中时*/
        function nickNameFocus(){
            var nickName=document.getElementById("nickName");
            var nickNameId=document.getElementById("nickName_prompt");
            nickName.className="register_input register_input_Focus";
            nickNameId.innerHTML="昵称可由大小写英文字母、数字组成,长度为4-20个字符";
             nickNameId.className="register_prompt";
            }
            
        /*鼠标离开昵称文本框中时*/    
        function nickNameBlur(){
            var nickName=document.getElementById("nickName");
            var nickNameId=document.getElementById("nickName_prompt");
            nickNameId.innerHTML="";
            var reg=/^[a-zA-Z0-9]{4,20}$/;    
             if(nickName.value==""){
                nickNameId.innerHTML="昵称为必填项,请输入您的昵称";
                nickNameId.className="register_prompt_error";
                nickName.className="register_input register_input_Blur";
            return false;
              }
              if(reg.test(nickName.value)==false){
                nickNameId.innerHTML="昵称格式错误,请用大小写英文字母、数字,长度4-20个字符";
                nickNameId.className="register_prompt_error";
                nickName.className="register_input register_input_Blur";
            return false;
              }
            
              nickNameId.className="register_prompt_ok";
              nickName.className="register_input";
              return true;
        }
        
        
        /*鼠标在密码文本框中时*/
        function pwdFocus(){
            var pwd=document.getElementById("pwd");
            var pwdId=document.getElementById("pwd_prompt");
            pwd.className="register_input register_input_Focus";
            pwdId.innerHTML="密码可由大小写英文字母、数字组成,长度6-20个字符";
            pwdId.className="register_prompt";
            }
            
        /*鼠标离开密码文本框中时*/    
        function pwdBlur(){
            var pwd=document.getElementById("pwd");
            var pwdId=document.getElementById("pwd_prompt");
            pwdId.innerHTML="";
            var reg=/^[a-zA-Z0-9]{6,20}$/;    
             if(pwd.value==""){
                pwdId.innerHTML="密码为必填项,请设置您的密码";
                pwdId.className="register_prompt_error";
                pwd.className="register_input register_input_Blur";
            return false;
              }
              if(reg.test(pwd.value)==false){
                pwdId.innerHTML="密码格式错误,请用大小写英文字母、数字,长度6-20个字符";
                pwdId.className="register_prompt_error";
                pwd.className="register_input register_input_Blur";
            return false;
              }
            
              pwdId.className="register_prompt_ok";
              pwd.className="register_input";
              return true;
        }
        
        /*鼠标在再输入一次密码文本框中时*/
        function repwdFocus(){
            var repwd=document.getElementById("repwd");
            repwd.className="register_input register_input_Focus";
            }
            
        /*鼠标离开再输入一次密码文本框中时*/    
        function repwdBlur(){
            var pwd=document.getElementById("pwd");
            var repwd=document.getElementById("repwd");
            var repwdId=document.getElementById("repwd_prompt");
            repwdId.innerHTML="";
             if(repwd.value==""){
                repwdId.innerHTML="请再次输入您的密码";
                repwdId.className="register_prompt_error";
                repwd.className="register_input register_input_Blur";
            return false;
              }
              if(pwd.value!=repwd.value){
                repwdId.innerHTML="两次输入密码不一致,请重新输入";
                repwdId.className="register_prompt_error";
                repwd.className="register_input register_input_Blur";
            return false;
              }
            
              repwdId.className="register_prompt_ok";
              repwd.className="register_input";
              return true;
        }
        /*单击提交注册页面时,对页面内容进行验证*/
        function checkRegister(){
              emailBlur();
              nickNameBlur();
              pwdBlur();
              repwdBlur();
              var flagEmail=emailBlur();
              var flagNickName=nickNameBlur();
              var flagPwd=pwdBlur();
              var flagRepwd=repwdBlur();
              if(flagEmail==true &&flagNickName==true &&flagPwd==true &&flagRepwd==true){
                  return true;
                  }
                else{
                    return false;
                    }
            }

/*当鼠标放在提交注册按钮上时,按扭样式*/
        function btn_over(){
            document.getElementById("registerBtn").src="images/register_btn_over.gif";
            }
        
        /*当鼠标离开提交注册按钮上时,按扭样式*/
        function btn_out(){
            document.getElementById("registerBtn").src="images/register_btn_out.gif";
            }
    </script>


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值