Question

我有Bootstrap，我的验证有问题。我只需要输入正整数。如何实现呢？

例如：

<div>                       
    <input type="number" id="replyNumber" data-bind="value:replyNumber" />
</div>

Answer 1

这不是特定于Twitter的引导程序，它是一个普通的HTML5组件，您可以使用min和max属性指定范围（在您的情况下仅指定第一个属性）。例如：

<div>                       
    <input type="number" id="replyNumber" min="0" data-bind="value:replyNumber" />
</div>

我不确定控件中是否只允许整数，但是你可以指定step属性：

<div>                       
    <input type="number" id="replyNumber" min="0" step="1" data-bind="value:replyNumber" />
</div>

现在只能使用更高（和等于）零的数字，并且步长为1，这意味着值为0,1,2,3,4 ......。

BE AWARE ：并非所有浏览器都支持HTML5功能，因此如果您真的想使用约束，建议您使用某种JavaScript回退（以及后端）。 / p>

有关支持它的浏览器列表，您可以查看caniuse.com。

Answer 2

嗯，我总是使用同样简单的方法，它对我有用。在您的HTML中将类型保留为文本（如下所示）：

<input type="text" class="textfield" value="" id="onlyNumbers" name="onlyNumbers" onkeypress="return isNumber(event)" onpaste="return false;"/>

在此之后你只需要在javascript上添加一个方法

<script type="text/javascript">     
function isNumber(evt) {
        evt = (evt) ? evt : window.event;
        var charCode = (evt.which) ? evt.which : evt.keyCode;
        if ( (charCode > 31 && charCode < 48) || charCode > 57) {
            return false;
        }
        return true;
    }
</script>

通过这种简单的验证，您只能获得所需的正数。您可以修改charCodes以向方法添加更多有效密钥。

以下代码正常运行：Only numbers validation

Answer 3

您可以使用PATTERN：

<input class="form-control" minlength="1" pattern="[0-9]*" [(ngModel)]="value" #name="ngModel">

<div *ngIf="name.invalid && (name.dirty || name.touched)" class="text-danger">
  <div *ngIf="name.errors?.pattern">Is not a number</div>
</div>

Answer 4

You should use jquery validation because if you use  type="number" then you can also enter "E" character in input type, which is not correct.

Solution:

**HTML**

<input class="form-control floatNumber" name="energy1_total_power_generated" type="text" required="" > 

**JQuery**
// integer value validation
    $('input.floatNumber').on('input', function() {
        this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
    });

Bootstrap号码验证

4 个答案: