六位密碼框展示

Pasted Graphic 1.png

html

+'<div class="pop_password">'
              +'<h3>輸入密碼</h3>'
              +'<p>請輸入6位支付密碼</p>'
              +'<input type="password" name="password" maxlength="6" id="password">'
              +'<div class="psw_show clearfixed">'
                +' <input type="password" readonly="">'
                +' <input type="password" readonly="">'
                +' <input type="password" readonly="">'
                +' <input type="password" readonly="">'
                +' <input type="password" readonly="">'
                +' <input type="password" readonly="">'
              +'</div>'
              +'<img src="image/close_psw.png" class="psw_close">'
              +'<a href="javascript:void(0)" class="forget_psw_btn">忘記密碼?</a>'
+'</div>'

js

 /**
   * [pop_psw_show 出現密碼輸入提示框事件]
   * @return {[type]} [description]
   */
  pop_psw_show = function (){
    var top = jqueryMap.$settlement.scrollTop();
    
    //set pop section
    jqueryMap.$pop.css('top',top+'px');
    jqueryMap.$pop.css('height',document.documentElement.clientHeight+'px');

    //set pop_cont again
    jqueryMap.$pop_password.css({'top':'50%','left':'50%','-webkit-transform':'translate(-50%,-50%)'});

    jqueryMap.$pop.css('display','block');
    jqueryMap.$pop_password.css('display','block');
    jqueryMap.$pop_password_input.focus();
  }

  //密碼提交驗證
  /**
   * [detectPassword 檢測密碼格式,以及設置密碼顯示的樣式]
   * @return {[type]} [description]
   */
  detectPassword = function (){
    console.log('dd');
    //自定義密碼框的思路時 前面設置個opacity為0的input作為主要輸入元素,就像自定義select
    //然后下面有個自定義的密碼展示框,當輸入框元素變化,自定義密碼展示框也變化
    var 
      psw_str = jqueryMap.$pop_password_input.val().trim(),
      len     = psw_str.length,
      $input  = jqueryMap.$psw_show.find('input'); 
    
    //設置各個密碼框的值  
    for(var i = 0 ; i < len ; i++ ){
     
      $input.eq(i).val(psw_str[i]);
      
    }
    //假設點擊刪除按鈕時
    $input.each(function() {
      var index = $(this).index();
      if (index >= len) {
        $(this).val("");
      }    
    });

    if(psw_str.length == 6){
      if(/\d{6}/.test(psw_str)){
        
      }else{
        console.log(psw_str);
        alert('密碼格式不正確')
        return false;
      }

      stateMap.submit_model.password = psw_str;

      //密碼驗證成功 提交數據
      submitData(); 
    }
  }
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容