檢查的值長度，並且如果它是數字

Question

我使用以下代碼來檢查是否在文本框中的值是數字：

(function ($) { 
    $.fn.numeric = function (options) { 
     return this.each(function() { 
      var $this = $(this); 

      $this.keypress(options, function (e) { 
       // allow backspace and delete 
       if (e.which == 8 || e.which == 0) 
        return true; 

       //if the letter is not digit 
       if (e.which < 48 || e.which > 57) 
        return false; 

       // check max range 
       var dest = e.which - 48; 
       var result = this.value + dest.toString(); 
       if (result > e.data.max) { 
        return false; 
       } 
      }); 
     }); 
    }; 
})(jQuery); 

當輸入文本框元件上使用，我聲明它如下

$(input).numeric({ max: 999}); 

問題是它正在處理輸入並檢查 值應該是整數而不是字符串。

但我需要改變它將驗證double的代碼。

因此，如果我將插入0.22這將是確定的，但如果我將插入.22 它不會填充數字。

請幫

Answer 1

此代碼應該按預期工作：

(function($) { 
    $.fn.numeric = function(options) { 
     return this.each(function() { 
      var $this = $(this); 

      $this.keypress(options, function(e) { 
       // allow backspace and delete 
       if (e.which == 8 || e.which == 0) { 
        return true; 
       } 

       // allow float 
       if (e.which == 46 && this.value.length >=1 && this.value.indexOf('.') == -1) { 
        return true; 
       } 

       //if the letter is not digit 
       if (e.which < 48 || e.which > 57) return false; 

       // check max range 
       var dest = e.which - 48; 
       var result = this.value + dest.toString(); 
       if (result > e.data.max) { 
        return false; 
       } 
      }); 
     }); 
    }; 
})(jQuery); 

演示：http://jsfiddle.net/GuillaumeCisco/nGNxG/

Answer 2

檢查這個答案和意見（尤其是接受了一個）： Validate decimal numbers in JavaScript - IsNumeric()

否則，是不是真的有必要檢查每一個按鍵你的價值？

Answer 3

我試過調試代碼。你只需要更新'。'。 '。'的ASCII值（點）是46.如果你做下面的變化，它將工作！

1. 更新(e.which == 8 || e.which == 0)與(e.which == 8 || e.which == 0||e.which==46)
2. 你需要換行輸入引號 - 用代碼alert(parseInt($('input').val()));

我在上面看到的變化提醒值$('input').numeric({ max: 999});

測試解決了這個問題:)請，讓我知道如果它不工作:)

Answer 4

它可以是繁瑣驗證每個keypress事件，只是返回false從按鍵不會讓用戶知道他們爲什麼不允許輸入該密鑰。您可能會在該標籤中標記爲數字或類似的字段，但即使用戶只是您自己，您可以給用戶的任何額外幫助都可以節省很多煩惱。那樣的事情呢？

(function($) { 
    $.fn.numeric = function(options) { 
     return this.each(function() { 
      var $this = $(this); 

      $this.blur(function(e) { 
       if (isNaN(+this.value)) { 
        $('<span class="error">Must be numeric</span>').insertAfter($this); 
       } else { 
        $this.next('span.error').remove(); 
       } 
      }); 
     }); 
    }; 
}(jQuery)); 

有一個working example here。

另外，您需要從選項中添加最小/最大值檢查。爲了這個例子，我刪除了它。最後，如果您要進行大量驗證，則可能需要使用像jQuery Validation這樣的驗證庫，而不是滾動您自己的驗證庫。

Answer 5

我遵循@Guillaume建議的解決方案。但是我加了附加條件

if (this.value.length > e.data.maxLength) 
      return false; 

所以所有的代碼下面

(function ($) { 

    $.fn.numeric = function (options) { 

     return this.each(function() { 
      var $this = $(this); 

      $this.keypress(options, function (e) { 

       // allow backspace and delete 
       if (e.which == 8 || e.which == 0) 
        return true; 

       if (e.which == 46 && this.value.length >= 1 && this.value.indexOf('.') == -1) { 
        return true; 
       } 
       //if the letter is not digit 
       if (e.which < 48 || e.which > 57) 
        return false; 

       // check max range 
       var dest = e.which - 48; 
       var result = this.value + dest.toString(); 
       if (result > e.data.max) { 
        return false; 
       } 

       if (this.value.length > e.data.maxLength) 
        return false; 
      }); 
     }); 
    }; 
})(jQuery); 

，並使用它

$(input).numeric({ max: 999,maxLength:4}); 

最大長度 - 屬性表示最大輸入長度