Xác thực số hiệu khởi động

Question

Tôi đang có Bootstrap và tôi gặp sự cố khi xác thực. Tôi chỉ cần nhập số nguyên dương. Làm cách nào để triển khai?

Ví dụ:

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

Answer 1

Nó không twitter bootstrap cụ thể, nó là một thành phần HTML5 bình thường và bạn có thể xác định phạm vi với min và max thuộc tính (trong trường hợp của bạn chỉ thuộc tính đầu tiên). Ví dụ:

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

Tôi không chắc chắn nếu chỉ số nguyên được phép theo mặc định trong việc kiểm soát hay không, nhưng nếu không bạn có thể chỉ định step thuộc tính:

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

Bây giờ chỉ số cao hơn (và bằng 0) có thể được sử dụng và có một bước 1, có nghĩa là các giá trị là 0, 1, 2, 3, 4, ....

Ví dụ: http://jsfiddle.net/dcPgW/.

BE AWARE: Không phải tất cả các trình duyệt đều hỗ trợ tính năng HTML5, vì vậy bạn nên có một số loại dự phòng JavaScript (và ngược lại) nếu bạn thực sự muốn sử dụng các ràng buộc.

Để biết danh sách các trình duyệt hỗ trợ nó, bạn có thể xem caniuse.com.

Answer 2

Tôi luôn luôn sử dụng cùng một cách dễ dàng và nó hoạt động cho tôi. Trong HTML của bạn giữ các loại dưới dạng văn bản (như thế này):

<input type="text" class="textfield" value="" id="extra7" name="extra7" onkeypress="return isNumber(event)" /> 

Sau này, bạn chỉ cần thêm một phương thức trên 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> 

Với xác nhận dễ dàng này, bạn sẽ chỉ nhận được số dương như bạn muốn. Bạn có thể sửa đổi các mã để thêm nhiều khóa hợp lệ vào phương thức của mình.

Đây là mã hoạt động: Only numbers validation