登录 注册 用户体验

 

 

HTML 代码

< 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 >

 

CSS 代码

/* 注册 登录 友好 提示 */
#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 ; }

 

jquery 代码

$( " .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( '