六位密码框展示

Pasted Graphic 1.png

html

+'
'
              +'
输入密码
'
              +'
请输入6位支付密码
'
              +''
              +'
'
                +' '
                +' '
                +' '
                +' '
                +' '
                +' '
              +'
'
              +''
              +'忘记密码?'
+'
'

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(); 
    }
  }