1. 程式人生 > >登錄界面

登錄界面

brush lac fun RR light 需求 log bili pass

技術分享圖片

需求:空值--提示輸入,錯誤圖標;不為空--提示隱藏,成功圖標

html:

        <div class="login_i_box">
                <input id="username" name="username" value="" class="username" onblur="input_name()" type="text" placeholder="賬號" data-check="tel" required="true"
                  autocomplete="off" maxlength="32">
                <div class="p_error" id="username_error">請輸入賬號</div>
                <input id="pwd" name="pwd" data-check="old_pwd" class="password" onblur="input_pwd()" type="password" placeholder="密碼" required="true"
                  maxlength="16">
                <div class="tips" id="pwd_error">請輸入密碼</div>
                <div class="zddl clearfix">
                  <input type="checkbox" name="autoLogin" id="autoLogin">
                  <span>下次自動登錄</span>
                  <a href="javascript:;">忘記密碼?</a>
                </div>
                <input type="button" class="login_btn" id="submit" data-action="login" value="登 錄">
                <div class="clearfix"></div>
              </div>

JQ:

   function input_name() {
      if ($("#username").val() === ‘‘) {
        $("#username").addClass("input_err");
        $("#username").removeClass("input_right");
        $(".p_error").css("visibility", "visible");
      } else {
        $("#username").addClass("input_right");
        $("#username").removeClass("input_err");
        $(".p_error").css("visibility", "hidden");
      }
    }

  

登錄界面