Question

我怎样才能这样做，以便Jquery检查HTML表单中的ESNStart和ESNEND是否在同一范围内，否则它会在输入ESNEnd的值后抛出一个警告，说明这两个数字都需要与用户在同一范围内?? 我仍然不明白我是如何做到这一点所以ESNList检查它在文本字段中输入的所有多个值是否在相同的范围内，否则它也会向用户发出警告，以输入与if语句显示？展示这一点的小提示将帮助我学到很多东西，多亏一帮！

<html>
    <head>
        <script type="text/javascript" src="jquery/jquery-1.8.3.js"></script>
        <script type="text/javascript">
            $(function() {
                $(":text").css("border", "2px solid red");
                $(":text").keyup(function() {
                    var enteredData = $(this).val()
                    console.log(enteredData);
                    if (enteredData == "") {
                        $(this).css("border", "2px solid red");
                    } else {
                        $(this).css("border", "inherit");
                    }
                    if ($(this).attr("id") == "ESNList") {
                        esnList = parseInt(enteredData);
                        switch (true) {
                            case (esnList >= 986329 && esnList <= 999999):
                                $("#ddl_StxName").val("stx2");
                                $("#ddl_rtumodel").val("globalstar");
                                break;
                            case (esnList >= 660000 && esnList <= 699999):
                                $("#ddl_StxName").val("mmt");
                                $("#ddl_rtumodel").val("globalstar");
                                break;
                            case (esnList >= 200000 && esnList <= 299999):
                                $("#ddl_StxName").val("stm3");
                                $("#ddl_rtumodel").val("stmcomtech");
                                break;
                            case (esnList >= 1202114 && esnList <= 1299999):
                                $("#ddl_StxName").val("smartone");
                                $("#ddl_rtumodel").val("globalstar");
                                break;
                        }

                    }
                });
            });
        </script>
    </head>

    <body>
        <form id="provision">ESNList:
            <input type="text" id="ESNList" name="ESNList" size="30" />
            <br />ESN Start:
            <input type="text" id="ESNStart" name="ESNStart" size="10" />
            <br />ESN End:
            <input type="text" id="ESNStart" name="ESNStart" size="10" />
            <br />UnitName:
            <input type="text" id="STxName" name="STxName" size="30" />
            <br />Unit Model:
            <select name="STxName" id="ddl_StxName">
                <option value="stx2">STX2</option>
                <option value="stm3" selected>STM3</option>
                <option value="acutec">Acutec</option>
                <option value="trackpack">Trackpack</option>
                <option value="mmt">MMT</option>
                <option value="smartone">Smartone</option>
                <option value="smartoneb">SmartOneB</option>
            </select>
            <br />RTU Model Type:
            <select name="rtumodel" id="ddl_rtumodel">
                <option value="globalstar">GlobalStar</option>
                <option value="both">Both</option>
                <option value="comtech">Comtech</option>
                <option value="stmcomtech">STMComtech</option>
            </select>
            <br />
            <input type="submit" value="submit" />
        </form>
    </body>
</html>

Answer 1

我创建了一些似乎有效的方法，尽管我还没有创建超出范围的数字组。

我强烈建议您不要让用户输入以逗号分隔的列表，因为很难指向用户无效的条目。将每个数字放在自己的输入中会更加清晰。您可以轻松添加“添加新号码”按钮并为其创建新输入。

我使用数组来存储范围以及为其他字段更改的有效范围的值。这个模块并不简单，建议您创建一个测试沙箱，其中包含您可以测试的各种数字。

$('#ESNList').keyup(function(){
    var enteredData = $(this).val();
    $(this).removeClass('valid');
    if( enteredData == ''){
        return;
    }
    if(hasMultipleValues(enteredData)){
        var range=rangeCheckMultipleNumbers(enteredData)
      if( range===false){
        log('Numbers not in same range');
        return;
      } else{
          setRangeValues(range);

        $(this).addClass('valid');
      }
    }
    var rangeIdx = getRangeIndex(enteredData);
    if(rangeIdx===false){
        log('Number not in range');
    }else{
        setRangeValues(rangeIdx);           
        $(this).addClass('valid');
    }
});

function hasMultipleValues( str){ 
     /* second test for a singel entry with comma at end*/   
    return str.indexOf(',') !=-1 && str.indexOf(',') != str.length-1;   
}

var ranges = [
    [986329, 999999],
    [660000, 699999],
    [200000, 299999],
    [1202114, 1299999]
];

var rangeText = [
    ["stx2", "globalstar"],
    ["mmt", "globalstar"],
    ["stm3", "stmcomtech"],
    ["smartone", "globalstar"]
]


/* returns range index if all in same range, otherwise returns false*/
function rangeCheckMultipleNumbers(str) {
    var nums = str.split(',');
    var rangeMatch = true; /* clean array to remove empty values if extra commas*/
    nums = $.grep(array, function(item, index) {
        return parseInt(item);
    });

    var groupRange = getRangeIndex(nums[0]);
    if(nums.length > 1) {
        for(i = 1; i < nums.length; i++) {
            if(!checkSameRange(nums[i - 1], nums[i])) {
                rangeMatch = false;
            }
        }
    }

    return rangeMatch ? groupRange : false;
}


function setRangeValues(rangeIndex) {
    $("#ddl_StxName").val(rangeText[rangeIndex][0]);
    $("#ddl_rtumodel").val(rangeText[rangeIndex][1]);
}

function checkSameRange(num1, num2) {
    return getRangeIndex(parseInt(num1, 10)) == getRangeIndex(parseInt(num2, 10));
}
/* returns false if out of range, otherwise returns range index*/
function getRangeIndex(num) {
    var idx = false;
    $.each(ranges, function(i, range) {
        if(num >= range[0] && num <= range[1]) {
            idx = i;
            return false;
        }
    });
    return idx;
}

DEMO：http://jsfiddle.net/hXsQ8/1/

我怎么能用Jquery完成这个？

1 个答案: