登录 注册 用户体验

 

 

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tbody>
  <tr>
    <td width="18%" height="48" align="right" valign="middle"><h4>Email：</h4></td>
    <td width="40%" valign="middle"><input type="text" class="inputs rlinput uemail"  name="email" value="" id="email" > </td>
    <td width="42%" valign="middle"><span></span></td>
  </tr>
  <tr>
    <td height="48" align="right" valign="middle"><h4>昵称：</h4></td>
    <td valign="middle"><input type="text" name="nick" id="nick" class="inputs rlinput psd_input" value=""></td>
    <td valign="middle"><span></span></td>
  </tr>
  <tr>
    <td height="48" align="right" valign="middle"><h4>密码：</h4></td>
    <td valign="middle"><input type="password" name="password" id="password" class="inputs rlinput psd_input" value=""></td>
    <td valign="middle"><span></span></td>
  </tr>
  <tr>
    <td height="48" align="right" valign="middle"><h4>确认密码：</h4></td>
    <td valign="middle"><input type="password" name="confirm_password" id="confirm_password" class="inputs rlinput psd_input" value=""></td>
    <td valign="middle"><span></span></td>
  </tr>
  <tr>
    <td height="48" align="right" valign="middle"><h4>输入验证码：</h4></td>
    <td valign="middle">
    <input type="text" id="captcha" name="captcha" class="inputs yzm_input"><img src="http://www.zxz.com/captcha.aspx?449427881" alt="看不清？请点击！" id="captcha1" style="cursor:pointer;" onclick="this.src='http://www.zxz.com/captcha.aspx?'+Math.random()">
      <a onclick="$('#captcha1').click();" tabindex="-1" class="blue" style="cursor:pointer;">看不清，换一张？</a></td>
    <td valign="middle"><span></span></td>
  </tr>
  
  
  <tr>
    <td height="48" align="right" valign="middle">&nbsp;</td>
    <td valign="middle"><input type="button" onclick="checkSignupForm()" value="注册" class="dbtn reg_btn"><span></span></td>
    <td valign="middle"><span></span></td>
  </tr>
</tbody></table>

 

/* 注册 登录  友好 提示 */
#left { float:left; width:705px;} 
.zone { height:1%; border:1px solid #deceaa; background-color:#ffffff;margin-bottom:15px; padding:15px;}
.rlinput { width:270px; }

.do_tip { display:inline-block;height:24px;line-height:24px;*line-height:28px !important; *line-height:24px;   padding-right:10px; border:1px solid #eeda7b; color:#fe7201; padding-left:26px;background:url(input_warn.gif) no-repeat 4px 4px;background-color:#fffceb;}
.error_tip {background:url(input_error.gif) no-repeat 4px 4px;background-color:#fffceb;}  
.ok_tip { border:none; background-color:none; background:url(input_ok.gif) no-repeat 4px 4px;}
.help_tip {background:none;border:none; background-color:none; padding:0; color:#579933;}

 

$(".inputs").focus(function(){        
          $(this).addClass("on_input");
    }); 
    
$(".uemail").focus(function(){
  $('.do_tip').empty();
  $('.do_tip').removeClass("do_tip error_tip");
  if($(this).val() =="")
  {        
      //$(this).parent().parent().next().find("span").show();
      $(this).parent().next().find("span").removeClass();
      $(this).parent().next().find("span").addClass('help_tip');
      if($(this).attr('id')=="login_user")
      {
          $(this).parent().next().find("span").html("");
      }
      else
      {
          $(this).parent().next().find("span").html("请使用有效邮箱");
      }
      return (false);
  }
    
}); 
     
$(".uemail").blur(function(){
      CheckEmail($(this));     
});  




    $("#nick").focus(function(){
        $(this).select();    
        if($(this).val() =="")
        {   $(this).parent().next().find("span").removeClass('do_tip error_tip ok_tip help_tip');
            $(this).parent().next().find("span").addClass('help_tip');
            $(this).parent().next().find("span").html("字母,数字下划线或汉字");
            return (false);
        }  
    }); 
     $("#nick").blur(function(){        
          CheckNick($(this));
    }); 
     
    $("#password,#confirm_password,#login_psword").focus(function(){
        if($(this).val() =="")
        {   $(this).parent().next().find("span").removeClass('do_tip error_tip ok_tip help_tip');
            $(this).parent().next().find("span").addClass('help_tip');
            if($(this).attr('id')=="login_psword")
            {
                $(this).parent().next().find("span").html("");
            }
            else
            {
                $(this).parent().next().find("span").html("不能少于6位字符");
            }
            
            
            
            return (false);
        }  
    }); 
    $("#password,#login_psword").focus(function(){
        $(this).select();                                          
        
    });     
    $("#password,#login_psword,#nick").select(function(){                                  
        $('.maillist').hide();
    });
    
    
    
    $("#password,#confirm_password,#login_psword").blur(function(){
        CheckPassword($(this));
    });
    
    $("#confirm_password").focus(function(){
        if($(this).val() =="")
        {   $(this).parent().next().find("span").removeClass('do_tip error_tip ok_tip help_tip');
            $(this).parent().next().find("span").addClass('help_tip');
            $(this).parent().next().find("span").html("请再次输入密码");
            return (false);
        }  
    }); 
    $("#confirm_password").blur(function(){
        ComparePassword($(this).parent().parent().prev().find("input"),$(this));
    }); 
    
    
    $("#captcha").focus(function(){
        if($(this).val() =="")
        {   $(this).parent().next().find("span").removeClass('do_tip error_tip ok_tip help_tip');
            $(this).parent().next().find("span").addClass('help_tip');
            $(this).parent().next().find("span").html("");
            return (false);
        }  
    });
    
    $("#captcha").blur(function(){
        CheckYzm($(this));
    }); 
    
    $(".inputs").blur(function(){
          $(this).removeClass("on_input");
    }); 
    
    
function CheckEmail(Email)
{    //Email.parent().parent().next().find(".do_tip").remove();
    Email.parent().next().find("span").removeClass('error_tip ok_tip help_tip').addClass('do_tip');
    if(Email.val() =="")
    {        
        //Email.parent().parent().next().find(".do_tip").show();
        Email.parent().next().find(".do_tip").addClass('