如何仅使用javascript验证带有数字的输入字段？

Question

我是 Javascript 新手，我需要验证输入字段。 我只想输入数字，不允许输入字母或特殊字符。 我需要在输入字段下方显示错误消息。 输入字段的验证规则是：

• 应该只有数字
• 数字应大于 1 且小于可用数量。 我有包含三个输入字段的表单，可用数量，数量和投标价格。 对数量字段中输入的值的验证应大于 1 且小于可用数量，这样才能正常工作。 但我只需要使用 javascript 输入数字。

我试过的是

<form method="post" action="/truckianBidSave/{{id}}" id="reviewForm">
                                    <input type="hidden" name="_token" value="{{csrf_token()}}" />
                                     <input type="hidden" name="user_name" value="{{auth_user().first_name}}" />
                                  <!--  <div class="form-group row">
                                        <label class="col-sm-4 col-form-label">Select Milege Gap: </label>
                                        <div class="col-sm-8">
                                        <select class="form-select" name="mileage" id="mileage" onchange="getOption()">
                                            <option>Select </option>
                                            {% for p in product_data %}
                                            <option value="{{p.number_of_products}},{{p.number_of_products_sold}},{{p.mileage_gap}}">{{p.mileage_gap}}</option>
                                            {% endfor %}
                                        </select>
                                        </div>
                                    </div>-->
                                    <div class="form-group row">
                                        {% set total=0 %}
                                        {% set sold=0 %}
                                         {% for p in product_data %}
                                        {% set total =total+p.number_of_products %}
                                        {% set sold=sold+p.number_of_products_sold %}
                                        {% endfor %}
                                        {% set available=total-sold %}
                                        <label for="available" class="col-sm-4 col-form-label">Available Quantity: </label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control" id="available" readonly name="available_qty" value={{available}} />
                                        </div>
                                    </div>
                                   
                                    <div class="form-group row">
                                        <label for="qty"  class="col-sm-4 col-form-label"> Quantity: </label>
                                        <div class="col-sm-8">
                                            <input type="text" id="qty" name="qty"  class="form-control"     oninput="checkInput(this);"   required />
                                            <p id="qty-msg">
                                            </p>
                                        </div>
                                    </div>
                                    
                                    <div class="form-group row">
                                        <label for="inputBid"  class="col-sm-4 col-form-label">Enter Bid Price</label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control" id="inputBid" name="bid" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');"/>
                                        </div>
                                    </div>
                                    <div class="form-group text-center">
                                        <input type="submit" class="btn btn-primary" id="btn" name="send" value="Send" disabled="disabled">
                                    </div>
                                </form>

Javascript代码：

function checkInput(item)
    {var available=document.getElementById("available");
        var msg=document.getElementById("qty-msg");
       if(parseInt(item.value)>parseInt(available.value) )
            { 
                
                item.value='';
                msg.innerHTML="* Value must be less than Availabe quantity "+available.value ;
                msg.style.color="red"; 
            }
        else if(parseInt(item.value)<1)
            {
                item.value='';
                msg.innerHTML="* Value must be greater than 1" ;
                msg.style.color="red"; 
            }
        else if('/^[A-Za-z]+$/'.test(item.value))
            {   alert('hi');
                item.value='';
                msg.innerHTML="* Only numbers allowed" ;
                msg.style.color="red"; 
            }

如何在使用 javascript 的输入文件中不允许使用字母和特殊字符。

Answer 1

用这个代替你的模式

!(/^[0-9]{1,}$/.test(item.value))

如果该值包含字符串，它将返回 true，否则，它将返回 false。

Answer 2

您可以使用<input type="number">作为'qty'输入。 有关详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number 。

一个 javascript 过滤器，如

document.getElementById('qty').addEventListener('keydown',
  function(event){
    if(!event.key.match(/^[0-9]$/)){
      event.preventDefault();
    }
 }
);

从来都不是绝对安全的，也就是说，它不能在某些旧浏览器或移动浏览器上运行。