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。有没有更短或更方便的方式？

更新

基本问题是在答案中缺少的适当情况下动态调整长度。

Answer 1

这是您使用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 2

您可以使用此代码，但不允许：

超过5位整数，也不是
超过2位小数，也不是
多个小数点，也不是
除数字或小数点以外的任何其他字符

它还根据是否有小数点应用属性更改。

它响应WD事件，因为有些方法可以在没有input事件触发的情况下更改内容（例如通过上下文菜单，鼠标或其他设备）。

＆＃13;

keyup

＆＃13;

$( '.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);
});

＆＃13;

Answer 3

使用RegExp，您可以验证输入的格式，如下例...

＆＃13;

// 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');
});

＆＃13;

.valid {
  color: green;
}

.invalid {
  color: red;
}

＆＃13;

<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>

＆＃13;

接受带小数点的固定长度数的便捷方式

3 个答案: