twitter-bootstrap 引导程序编号验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16517718/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap number validation
提问by user2264703
I'm having Bootstrap and I have problem with validation. I need input only positive integer. How to implement it?
我有 Bootstrap，但在验证时遇到问题。我只需要输入正整数。如何实施？
For example:
例如：
<div>
<input type="number" id="replyNumber" data-bind="value:replyNumber" />
</div>
回答by g00glen00b
It's not Twitter bootstrap specific, it is a normal HTML5 component and you can specify the range with the minand maxattributes (in your case only the first attribute). For example:
它不是 Twitter 引导程序特定的，它是一个普通的 HTML5 组件，您可以使用min和max属性指定范围（在您的情况下只有第一个属性）。例如：
<div>
<input type="number" id="replyNumber" min="0" data-bind="value:replyNumber" />
</div>I'm not sure if only integers are allowed by default in the control or not, but else you can specify the stepattribute:
我不确定控件中是否默认只允许使用整数，但您可以指定step属性：
<div>
<input type="number" id="replyNumber" min="0" step="1" data-bind="value:replyNumber" />
</div>Now only numbers higher (and equal to) zero can be used and there is a step of 1, which means the values are 0, 1, 2, 3, 4, ... .
现在只能使用大于（等于）零的数字，并且步长为 1，这意味着值是 0, 1, 2, 3, 4, ... 。
BE AWARE: Not all browsers support the HTML5 features, so it's recommended to have some kind of JavaScript fallback (and in your back-end too) if you really want to use the constraints.
请注意：并非所有浏览器都支持 HTML5 功能，因此如果您真的想使用约束，建议使用某种 JavaScript 回退（以及在您的后端）。
For a list of browsers that support it, you can look at caniuse.com.
有关支持它的浏览器列表，您可以查看caniuse.com。
回答by Jorge Valdés
Well I always use the same easy way and it works for me. In your HTML keep the type as text (like this):
好吧，我总是使用相同的简单方法，它对我有用。在您的 HTML 中，将类型保留为文本（如下所示）：
<input type="text" class="textfield" value="" id="onlyNumbers" name="onlyNumbers" onkeypress="return isNumber(event)" onpaste="return false;"/>
After this you only need to add a method on javascript
在此之后，您只需要在 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>
With this easy validation you will only get positive numbers as you wanted. You can modify the charCodes to add more valid keys to your method.
通过这种简单的验证，您将只获得您想要的正数。您可以修改 charCodes 以向您的方法添加更多有效键。
Here′s the code working: Only numbers validation
这是代码工作：仅数字验证
回答by Naveen dev
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.
您应该使用 jquery 验证，因为如果您使用type="number"那么您还可以在输入类型中输入“E”字符，这是不正确的。
Solution:
解决方案：
HTML
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, '');
});
回答by Pascal
you can use 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>
