twitter-bootstrap - 引导编号验证

Question

我正在使用 Bootstrap，但验证有问题。我只需要输入正整数。如何实施？

例如：

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

Answer 1

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

<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、...。

请注意：并非所有浏览器都支持 HTML5 功能，因此如果您真的想使用约束，建议您使用某种 JavaScript 后备（在您的后端也是如此）。

有关支持它的浏览器列表，您可以查看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 以向您的方法添加更多有效键。

这是代码工作：仅数字验证

Answer 3

你可以使用模式：

<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

您应该使用 jquery 验证，因为如果您使用type="number"then 您还可以在输入类型中输入“E”字符，这是不正确的。

解决方案：

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