驗證輸入類型=“數字”

Question

我嘗試進行一些編程：我有一個具有不同輸入字段（名稱，amountOfProductA，amountOfProductB，amountOfProduct ...）的訂單表單，經過一些驗證，我使用jquery腳本提交了此表單。

• 我打算重復使用該代碼，並且產品字段的數量可能會隨時間而變化。
• 在驗證中，我確保至少填寫（type =“ number”）個產品輸入字段之一。
• 如果用戶在產品輸入字段之一中輸入數字，而錯誤地在另一個產品輸入字段中輸入了字符（或數字和字符），則該表單將提交，而此后面的字段為空。
• 由於錯誤填寫的字段提交為空，因此我無法對此進行驗證。

您能給我個提示如何驗證嗎？ 我應該只使用type =“ text”輸入字段嗎？ （然后如何檢查至少一個產品字段？）

這是我的代碼：

jQuery(function ($) {
$('#bttn-submit').click(function () {

    $('input').css('background', '#fff'); // reset BGcolor

    var formOk = true;
    var allProdFields = $('input[type=number]') // Selection of all Product('number') fields
    var numberOfProdFields = allProdFields.length; // How many ('number') fields are there?

    // How many product fields are empty?
    var prodFieldsEmpty = 0;
    for (i = 0; i < numberOfProdFields; i++) {
        if( $(allProdFields[i]).val() == '' || $(allProdFields[i]).val() == 0){
            prodFieldsEmpty++;
            }
    }
    // Is there at least one product field filled?
    if(prodFieldsEmpty == numberOfProdFields){
        var formOk = false; 
        alert('Form not OK');
        allProdFields.css('background', '#f30302');
    }

    // Is the name field filled?
    if( $('#pesoonNaam').val() == '') {
        $('#pesoonNaam').css('background', '#f30302');
        var formOk = false; 
    }

    if( formOk == true ) {
        document.actieForm.submit();
    }
})
})

Answer 1

下面的代碼將不允許用戶在您的僅字段數字中輸入字符。 因為type =“ number”是html5，因此無法在所有瀏覽器中使用。

   $(document).on('keydown', '.numeric-input', function(event) {
        var dot_split = $(this).val().split('.');
        if ($.inArray(event.keyCode,[46,8,9,27,13]) !== -1 || (event.keyCode == 65 && event.ctrlKey === true) || (event.keyCode >= 35 && event.keyCode <= 39) && dot_split.length <= 2) {
            // let it happen, don't do anything
            return;
        }else{
            // Ensure that it is a number and stop the keypress
            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
                event.preventDefault(); 
            }   
        }
    })

然后，您可以使用.each檢查是否有任何字段為空。

prodFieldsEmpty = 0;
$('.numeric-input').each(function(){
   if($(this).val() != ""){
      prodFieldsEmpty++;
   }
})

我希望這可以幫助你！

Answer 2

您可以嘗試如下：

function checkInputs(){
   result = false;
   $('input[type="number"]').each(function(){
       if($(this).val() != '' && isNumeric($(this).val())) result = true;
   })
   return result;
 }

UPD： 小提琴

Answer 3

您不應該將驗證附加到提交按鈕，因為用戶可以在不按下表單的情況下提交表單，而是將驗證附加到表單的提交處理程序：

jQuery(function ($) {
    $('#formID').submit(
        ...

jQuery具有每種迭代方法，因此：

    $('input[type=number]').each( function(index) {

       /* do validation */

    });

在each中 ，該函數的this設置為當前元素，因此您可以執行以下操作：

     if (this.value == 0) {
        prodFieldsEmpty++;
     }

表單控件的值始終是字符串，因此如果值是'0'或'' （空字符串），則測試this.value == 0將返回true。 如果您不喜歡使用強制類型，請執行以下操作：

     if (this.value === '0' || this.value === '') {

如果要檢查該值是一個整數，那么有任何數量的關於這里的答案的，最簡單的是可能接受的答案在這里 ：

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

請注意，這將允許所有類型的數字，例如2.34e3。 如果您只想說正整數，可以嘗試：

function isPositiveInt(n) {
  return /^\d+$/.test(n);  // or return !/\D/.test(n)
}

同樣，有很多方法可以解決這個問題。

如果只想檢查至少一個通過，則設置一個標志，而不是先計算字段的數目，然后再計算通過的數目。

    var passNumeric = false;
    $('input[type=number]').each( function(index) {

      if (isNumber(this.value)) {
        passNumeric = true;

      } else {
        // do something with fails?
      }
    });

您可以使用else分支對失敗進行處理（或不執行任何操作）。