最近做項(xiàng)目，寫了類似支付密碼那樣的連續(xù)輸入框诅病，但是校驗(yàn)的時候遇到了問題，接下來就總結(jié)一下。
<!DOCTYPE html>
<html>
? <head>
??? <meta charset="utf-8">
??? <title>多個輸入框校驗(yàn)</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>
以上這段代碼房揭，實(shí)現(xiàn)的是輸入框，輸入一位數(shù)字后晌端，下一個輸入框自動得焦捅暴，方向鍵和del鍵也可用。
大家一定發(fā)現(xiàn)咧纠，上面多出一個輸入框蓬痒，這個輸入框，先留著惧盹，后面大有用處乳幸。
那么接下來就是驗(yàn)證，我這里主要介紹兩個方法钧椰。第一個就是輸入框得焦之后粹断，給父元素添加標(biāo)記，然后輸入框失焦之后進(jìn)行校驗(yàn)嫡霞。這個校驗(yàn)是觸發(fā)輸入框得焦失焦之后才進(jìn)行瓶埋，這個標(biāo)記就是為了不在用戶首次進(jìn)入頁面之后就進(jìn)行校驗(yàn)，而是輸入框觸發(fā)得焦失焦之后再校驗(yàn)诊沪。
// 父元素添加標(biāo)記
? ? $('.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();
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? });
以上這段代碼养筒，是在點(diǎn)擊頁面其他地方進(jìn)行輸入框的校驗(yàn)。
下面介紹第二種方法端姚，這個方法就要用到頁面中多出的輸入框晕粪，把每個小輸入框的值都放在這個輸入框中，最后一個小輸入框失焦之后渐裸，大的輸入框失焦巫湘，此時對大輸入框校驗(yàn)。在真正的項(xiàng)目中昏鹃，這個大輸入框type值應(yīng)該設(shè)為hidden,這里為了展示就么有設(shè)為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();
? ? ? }
? ? });
好了，兩種方法介紹到這里洞渤，如果還有其他的方法阅嘶，歡迎大家留言討論。
