如何驗證輸入字段？

Question

我需要驗證這些輸入文件，

1. 只能輸入四個數字。
2. 只能輸入數字。
3. 自動選項卡，如果填寫4個用戶輸入。

HTML，

<div class="row clearfix"> 
    <ul class="clearfix"> 
     <li><input type="number" id="num1"></li> 
     <li><input type="number" id="num2"></li> 
     <li><input type="number" id="num3"></li> 
     <li><input type="number" id="num4"></li> 
    </ul> 
</div> 

CSS，

.row { 
    display:block; 
    position:relative; 
    width:500px; 
} 
.clearfix:before,.clearfix:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; display:table; 
} 
ul { 
    list-style:none; 
    display:block; 
} 
.row ul li { float:left; width:75px; margin-right:2px; } 

JS，

$("#num3").on('keypress', function (event) { 
     var key = event.keyCode || event.charCode; 
     var maxlength = 4; 
     var num1 = $("#num1").val().length; 
     var num2 = $("#num2").val().length; 
     var num3 = $("#num3").val().length; 
     var num4 = $("#num4").val().length; 
     $(this).val($(this).val().replace(/[^0-9\.]/g,'')); 
     if($(this).val().length <= 3){ 
      $('#num3').css('background','#ECECEC'); 
     }else if(($(this).val().length == 4) && (key == 8 || key == 46)){ 
      $('#num3').css('background','#ECECEC'); 
     } 
     else{ 
      $('#num4').focus(); 
      return false; 
     } 

這裏是代碼：Demo

你可以幫我嗎？

Answer 1

您的意思是？

$(function() { 
 
    $("input[id^='num']").on('keyup', function (event) { 
 
    var key = event.keyCode || event.charCode; 
 
    var maxlength = 4; 
 
    $(this).val($(this).val().replace(/[^0-9\.]/g, '')); 
 
    var len = $(this).val().length; 
 
    if ((len < maxlength) || 
 
     (len == maxlength && (key == 8 || key == 46))) { 
 
     $(this).css('background', '#ECECEC'); 
 
    } else { 
 
     $(this).css('background', 'white'); 
 
     $(this).closest("li").next().find("input").focus(); 
 
     return false; 
 
    } 
 
    }); 
 
});

.row { 
 
    display:block; 
 
    position:relative; 
 
    width:500px; 
 
} 
 
.clearfix:before, .clearfix:after { 
 
    visibility: hidden; 
 
    display: block; 
 
    font-size: 0; 
 
    content:" "; 
 
    clear: both; 
 
    height: 0; 
 
    display:table; 
 
} 
 
ul { 
 
    list-style:none; 
 
    display:block; 
 
} 
 
.row ul li { 
 
    float:left; 
 
    width:75px; 
 
    margin-right:2px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="row clearfix"> 
 
    <ul class="clearfix"> 
 
     <li> 
 
      <input type="number" id="num1"> 
 
     </li> 
 
     <li> 
 
      <input type="number" id="num2"> 
 
     </li> 
 
     <li> 
 
      <input type="number" id="num3"> 
 
     </li> 
 
     <li> 
 
      <input type="number" id="num4"> 
 
     </li> 
 
    </ul> 
 
</div>

Answer 2

這個工程，是清潔的。

$(document).ready(function(){ 
     $("input").keypress(function(event){ 
      var x = event.which || event.keyCode; 
      if (x<48||x>57){ 
      return false; 
      } 
      console.log(parseInt($(this).attr("id"))); 
      if (($(this).val().length+1)==4){ 
        $(this).parent().next().find("input").focus(); 
      } 

     }); 

    }); 

，只是改變你的輸入ID，以1,2,3,4

http://jsfiddle.net/rvcu7zhg/2/