輸入值 jQuery 檢查長度和值？

Question

在驗證輸入的值時，我仍然被困在這里。 如果值在0.4和0.9之間，輸入n2將刪除只讀。 另一方面，如果值小於0.4或大於0.9 ，它將顯示模態對話框。 我的問題是如果用戶輸入的值鍵不是十進制值，則驗證值/長度？ 假設用戶插入值 1，那么我的 jquery 不會觸發，因為我的長度>=3 .. 如果我把長度檢查> 1 ，那么當用戶鍵入十進制值例如0.5時，模態對話框將彈出3 次.. 因為我的長度值>= 3 .. 如果我刪除長度檢查，只要用戶鍵入超過 1 的值長度，它就會一直彈出模式對話框。 我的問題是如果有效范圍值在0.4到0.9之間，如何控制這種情況，同時也可以檢查不是十進制數的值？ 可能嗎？

<input type="text" class="form-control input-sm da" name="da" id="da" value="" autocomplete="off" />

<div class="form-group actionDiv" style="display:none">
<label for="cdaaction">Action </label>
<input type="text" class="form-control input-sm cdaaction" name="cdaaction" id="cdaaction" value="" />
</div>

<input type="text" class="form-control input-sm n2" name="n2" id="n2" value="" autocomplete="off" readonly />

$(document).ready(function() {
            $(".da").keyup(function() {
            var dInput = $(this).val();

            if ($('.da').val().length >= 3) 
            {
                if(dInput < 0.4 || dInput > 0.9)
                {
                    var mymodal = $('#mi-modal');
                    mymodal.find('.modal-body').html('Is the value correct: '+ $('.da').val() +'  ?');
                    mymodal.find('.modal-footer').html('<button type="button" class="btn btn-default" id="modal-btn-si">Yes</button><button type="button" class="btn btn-primary" id="modal-btn-no">No</button>');
                    $("#mi-modal").modal('show');

                    $("#modal-btn-si").on("click", function(){
                    $("#mi-modal").modal('hide');
                    $('.actionDiv').show();
                    });

                    $("#modal-btn-no").on("click", function(){
                    $("#mi-modal").modal('hide');
                    $('.actionDiv').hide();
                    $("#da").focus();
                    });
                    $(".n2").attr('readonly', true);

                }
                else
                {
                    $(".n2").removeAttr("readonly");
                    $('.actionDiv').hide();
                }
            }


            });
        });

Answer 1

使用parseFloat()

$(document).ready(function() {
        $(".da").keyup(function() {
        //var dInput = $(this).val();

        var val = parseFloat($(this).val());


            if (!isNaN(val) && (val < 0.4 || val > 0.9))
            //if(dInput < 0.4 || dInput > 0.9)
            {
                var mymodal = $('#mi-modal');
                mymodal.find('.modal-body').html('Is the value correct: '+ $('.da').val() +'  ?');
                mymodal.find('.modal-footer').html('<button type="button" class="btn btn-default" id="modal-btn-si">Yes</button><button type="button" class="btn btn-primary" id="modal-btn-no">No</button>');
                $("#mi-modal").modal('show');

                $("#modal-btn-si").on("click", function(){
                $("#mi-modal").modal('hide');
                $('.actionDiv').show();
                });

                $("#modal-btn-no").on("click", function(){
                $("#mi-modal").modal('hide');
                $('.actionDiv').hide();
                $("#da").focus();
                });
                $(".n2").attr('readonly', true);

            }
            else
            {
                $(".n2").removeAttr("readonly");
                $('.actionDiv').hide();
            }
        }


        });
    });

Answer 2

您可以考慮在blur()上觸發您的代碼。 當用戶將焦點移出輸入框時，可以檢查輸入的值是否正確。

此外，Carsten 所說的是正確的：使用type=number作為輸入，您不需要檢查輸入長度，只需要檢查值。