一個方便的方式接受帶有小數點

Question

基本上我需要接受來自輸入框中一個簡單的十進制值串的固定長度數。 輸入的長度固定爲5位，因此只允許接受5位數值。

但是，如果整數部分的長度是5，它應該能夠容納至少2個小數點，或者應該在任何時候至少容納2個十進制數字（不包括小數點分隔符）。但是整數長度部分不應超過5位數字。

我以爲用以下方式：

//co2-weight is the class of input field 
//by default the max-length and size is 6 
$('.co2-weight').keyup(function() { 
     if($(this).val().indexOf('.')>1) 
      { 
      $('.co2-weight').attr('size','9'); 
      $('.co2-weight').attr('maxlength','9'); 
      } 
     else 
      { 
      $('.co2-weight').attr('size','6'); 
      $('.co2-weight').attr('maxlength','6'); 
      }  
    }); 

但同樣在這裏需要再次檢查整數部分的長度，並將其設置爲5 是否有任何短或方便的方法？

UPDATE：

的基本問題是動態調整中缺少的答案正確的情況下的長度。

Answer 1

你可以使用此代碼，這將不允許：

• 超過5整數位，也不
• 多於2位十進制數，也不
• 多於一個小數點，也不
• 任何其它字符不是數字或小數點

它也適用於該屬性的變化取決於是否有小數點。

它響應input事件，因爲有些方法可以在事件未觸發的情況下更改內容（例如通過上下文菜單，鼠標或其他設備）。

$('.co2-weight').on('input', function() { 
 
    var good = $(this).val() 
 
     // remove bad characters and multiple points 
 
     .replace(/[^\d.]|\.(?=.*\.)/, '') 
 
     // remove any excess of 5 integer digits 
 
     .replace(/^(\d{5})\d+/, '$1') 
 
     // remove any excess of 2 decimal digits 
 
     .replace(/(\.\d\d).+/, '$1'); 
 
    if (good !== $(this).val()) { 
 
     // Only if something had to be fixed, update 
 
     $(this).val(good); 
 
    } 
 
    var pointPos = good.indexOf('.'); 
 
    // Determine max size depending on presence of point 
 
    var size = good.indexOf('.')>1 ? 8 : 6; 
 
    // Use prop instead of attr 
 
    $('.co2-weight').prop('size',size); 
 
    $('.co2-weight').prop('maxlength',size); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Input: <input class="co2-weight" size="6" maxlength="6">

Answer 2

這是你使用regular expressions.

你的情況，這是你需要^([0-9]{0,5}(\.[0-9]{0,2}){0,1})$

在javascript中，你會使用這種方式的正則表達式模式的完美案例：

$(this).val().match(/^([0-9]{0,5}(\.[0-9]{0,2}){0,1})$/) 

如果沒有找到您的匹配項，此行就會返回null。匹配的數組，如果它找到匹配。

如果你需要測試這個正則表達式使用https://regex101.com/

Answer 3

使用RegExp可以驗證，如下面的例子中輸入的格式...

// regular expression to allow 12345.12 
 
var regExp = new RegExp(/^\d{1,5}\.?\d{0,2}$/); 
 

 
// initialize form elements 
 
$('.valid').hide(); 
 
$('.invalid').hide(); 
 
$('.submit').prop('disabled', true); 
 

 
$('.co2-weight').keyup(function() { 
 

 
    // on keyup validate against regular expression 
 
    if (regExp.test($(this).val())) { 
 
    $('.valid').show(); 
 
    $('.invalid').hide(); 
 
    $('.submit').prop('disabled', false); 
 
    } else { 
 
    $('.valid').hide(); 
 
    $('.invalid').show(); 
 
    $('.submit').prop('disabled', true); 
 
    } 
 
}); 
 

 
$('.form').submit(function() { 
 
    
 
    // alert to show input was valid 
 
    alert('submitted'); 
 
});

.valid { 
 
    color: green; 
 
} 
 

 
.invalid { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p>Type something in the input to see if submit button become enable</p> 
 

 
<form class="form"> 
 
    <input type="text" class="co2-weight"> 
 
    <input type="submit" class="submit"> 
 
</form> 
 

 
<p class="valid">Input format is valid</p> 
 
<p class="invalid">Input format must be <= 99999.99</p>