最近做项目，写了类似支付密码那样的连续输入框，但是校验的时候遇到了问题，接下来就总结一下。
<!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 () {
var one = $('.one').val();
var two = $('.two').val();
var three = $('.three').val();
if (!one || !two || !three) {
$('.error').show();
} else {
$('.error').hide();
}
});
好了，两种方法介绍到这里，如果还有其他的方法，欢迎大家留言讨论。
网友评论