js实现类似支付密码的功能并进行校验

最近做项目，写了类似支付密码那样的连续输入框，但是校验的时候遇到了问题，接下来就总结一下。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>多个输入框校验</title>
    <style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
      #inputBox{
        border: 1px solid #d9d9d9;
        width: 122px;
        font-size: 14px;
        overflow: hidden;
      }
      .num{
        border: none;
        width: 20px;
        padding: 10px;
        float: left;
        border-right: 1px solid #d9d9d9;
        text-align: center;
      }
      .num:last-child{
        border-right: none;
      }
      .error{
        color: red;
        display: none;
      }
    </style>
</head>
<body>
    <div id="inputBox" class="box">
      <input type="text" class="one num"/>
      <input type="text" class="two num"/>
      <input type="text" class="three num"/>
    </div>
    <p class="error">不能为空</p>
    <input type="text" class="realInput"/>
</body>
<script src="js/jquery.js" charset="utf-8"></script>
<script type="text/javascript">
    function autoFocus (box) {
      var $inputBox = $('#' + box);
      var $inputs = $inputBox.find('input');
      var inputLength = $inputBox.find('input').length;
      for (var i = 0; i < inputLength; i ++) {
        t = $inputs[i];
        t.index = i;
        $(t).keyup(function (e) {
          var reg = /\d{1}/;
          var val = $(this).val();
          var prev = $(this)[0].index - 1;
          var next = $(this)[0].index + 1;
          if ((e.keyCode === 37 || e.keyCode === 8) && prev >= 0) {
            $inputs[prev].focus();
          }
          if (e.keyCode === 39 && next <= inputLength -1) {
            $inputs[next].focus();
          }
          if (reg.test(val)) {
            if (next > inputLength - 1) {
              return;
            }
            if ($($inputs[next]).val()) {
              return;
            }
            $inputs[next].focus();
          }
        })
      }
    };
    autoFocus('inputBox');
</script>
</html>

以上这段代码，实现的是输入框，输入一位数字后，下一个输入框自动得焦，方向键和del键也可用。

大家一定发现，上面多出一个输入框，这个输入框，先留着，后面大有用处。

那么接下来就是验证，我这里主要介绍两个方法。第一个就是输入框得焦之后，给父元素添加标记，然后输入框失焦之后进行校验。这个校验是触发输入框得焦失焦之后才进行，这个标记就是为了不在用户首次进入页面之后就进行校验，而是输入框触发得焦失焦之后再校验。

// 父元素添加标记

$('.num').focus(function () {

$('#inputBox').attr('data-dirty', 'true');

});

$('body').click(function (e) {

if (!$(e.target).hasClass('box') && !$(e.target).hasClass('num')) {

var dirty = $('#inputBox').attr('data-dirty');

var one = $('.one').val();

var two = $('.two').val();

var three = $('.three').val();

if (dirty) {

if (!one || !two || !three) {

$('.error').show();

} else {

$('.error').hide();

}

});

以上这段代码，是在点击页面其他地方进行输入框的校验。

下面介绍第二种方法，这个方法就要用到页面中多出的输入框，把每个小输入框的值都放在这个输入框中，最后一个小输入框失焦之后，大的输入框失焦，此时对大输入框校验。在真正的项目中，这个大输入框type值应该设为hidden,这里为了展示就么有设为hidden。

// 隐藏的input框

$('.num:last').blur(function () {

$('.realInput').blur();

});

var vals = '';

$('.num').keyup(function () {

var val = $(this).val();

vals += val;

$('.realInput').val(vals);

});

$('.realInput').blur(function () {