登录 注册 用户体验
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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"> </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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* 注册 登录 友好 提示 */
#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;}
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
$(".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('