如何使用 javascript 进行 html 表单验证仅对有效数字？

Question

如何使用 Javascript 验证输入表单以拉伸用户不要在输入表单元素中插入任何值。 对象： 1，我希望用户输入任何数值，只有当有一些字符或特殊字符时才会显示错误 2，如果用户让输入元素值为空，它也会提醒用户

下面是我的javascript代码

<script type="text/javascript"> 
     $(document).ready(function(){
     $('.quantity, .unitprice').on('keyup', function(e){
     var errors = array[];
     var quantity = document.getElementsByClassName('.quantity').val(); 
     var unitprice = document.getElementsByClassName('.unitprice').val();

     if(quantity== ""){
         errors = "quantity is empty";
    }
       if(unitprice== ""){
             errors = "unitprice is empty";
        }eles{
         if(errors){
             forearch(errors as errors){
                 alert(errors);
                    }
            }else{
                 calculate();
             }
        }
    });
      function calculate(){


             var qty = parseFloat( $('.quantity').val() ), 
             unit = parseFloat( $('.unitprice').val() ); 
             if( isNaN(qty) || isNaN(unit) ) {
             $('.result').text('');
              return false;
              }
                var total = qty * unit; 
                $('.result').text(total);

         }
         });

        </script>

这里是 HTML 格式

<td><?php echo form_input('quantity','',' class="quantity form-control"')?></td>
<td><?php echo form_input('unitprice','',' class="unitprice form-control"')?></td>
<td><label class="result"></label>$</td>

Answer 1

试试这个例子：

$(function() {
  $(".quantity, .unit").on('input', function() {
    this.value = this.value.replace(/[^0-9]/g, '');//<-- replace all other than digits
  }).on('focusout', function() {
    if (!this.value) {//<-- if empty
      alert('Required !');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="quantity" placeholder="Quantity">
<input type="text" class="unit" placeholder="Unit">

编辑：使用公共类的多个输入

$(function() {
  $(".digits").on('input', function() {//<-- common for all
    this.value = this.value.replace(/[^0-9]/g, ''); //<-- replace all other than digits
  }).on('focusout', function() {
    if (!this.value) { //<-- if empty
      alert('Required !');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="one digits" placeholder="One">
<input type="text" class="two digits" placeholder="Two">
<input type="text" class="three digits" placeholder="Three">
<input type="text" class="four digits" placeholder="Four">

对于没有类的多个输入（不推荐，除非你在整个页面上都有这个输入）

$(function() {
  $("input:text").on('input', function() {//<-- common for all
    this.value = this.value.replace(/[^0-9]/g, ''); //<-- replace all other than digits
  }).on('focusout', function() {
    if (!this.value) { //<-- if empty
      alert('Required !');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="One">
<input type="text" placeholder="Two">
<input type="text" placeholder="Three">
<input type="text" placeholder="Four">