zoukankan      html  css  js  c++  java
  • 登录 注册 用户体验

    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('
  • 相关阅读:
    Android开发系列(十七)QQ聊天之Android显示Gif ——在TextView中添加动态表情
    玩转Hook——Android权限管理功能探讨(二)
    玩转Hook——Android权限管理功能探讨(一)
    由一个简单算法想到的程序员素养问题
    Android手机间无线互传功能探索及实现
    从字节码的角度看Java内部类与外部类的互相访问
    HttpClient与HttpUrlConnection下载速度比较
    记一道有趣的Twitter面试题
    Android改进版CoverFlow效果控件
    Android应用如何监听自己是否被卸载及卸载反馈功能的实现(第二版)
  • 原文地址:https://www.cnblogs.com/zengxiangzhan/p/1871392.html
Copyright © 2011-2022 走看看