输入值 jQuery 检查长度和值？

Question

验证输入值时，我仍然卡在这里。如果值介于 0.4 和 0.9 之间，则输入 n2 将删除只读。另一方面，如果值小于0.4 或大于0.9，它将显示模态对话框。我的问题是如果用户输入的值键不是十进制值，则验证值/长度？假设用户插入值 1，然后是我的 jquery 不会触发，因为我的长度是>=3.. 如果我把长度检查> 1，然后当用户键入十进制值例如0.5，模态对话框 将弹出 3 次.. 因为我的长度值是 >= 3.. 如果我删除长度检查，只要用户键入超过一个长度的值，它将保持弹出模式对话框。 我的问题是如果有效范围值在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 作为您的输入，您不需要检查输入长度，只需检查值。