我正在使用 Bootstrap,但验证有问题。我只需要输入正整数。如何实施?
例如:
<div>
<input type="number" id="replyNumber" data-bind="value:replyNumber" />
</div>
我正在使用 Bootstrap,但验证有问题。我只需要输入正整数。如何实施?
例如:
<div>
<input type="number" id="replyNumber" data-bind="value:replyNumber" />
</div>
它不是 Twitter 引导程序特定的,它是一个普通的 HTML5 组件,您可以使用min
andmax
属性指定范围(在您的情况下只有第一个属性)。例如:
<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。
好吧,我总是使用同样简单的方法,它对我有用。在您的 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 以向您的方法添加更多有效键。
这是代码工作:仅数字验证
你可以使用模式:
<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>
您应该使用 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');
});