Question

查看代码：

<div class="box-body">
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">Version</label>

        <div class="col-sm-10">
            <input type="text" class="form-control"
                   name="versions" id="versions" placeholder="Eg. 5.9.158.65" 
                   onchange='validate(this.value)'>
        </div>
    </div>
</div>

这是我手动输入ipaddress的输入字段。 输入此字段的值时，我需要检查多选框（如下所述）中的值是否低于输入的IP地址格式。

脚本代码：

<script type='text/javascript'>
    var octet = '(?:25[0]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]|[0-9])';
    var ip = '(?:' + octet + '\\.){3}' + octet;
    var quad = '(?:\\[' + ip + '\\])|(?:' + ip + ')';
    var ipRE = new RegExp('(' + quad + ')');

    function validate(value) {
        if (ipRE.test(value)) {
            alert('"' + RegExp.$1 + '"');
        } else {
            alert('Invalid version format');
        }
    }
</script>

这里我使用正则表达式验证输入的ipaddress格式。

相同的观看代码：

<div class="box-body">
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">Target Versions(Supported Versions)</label>

        <div class="col-sm-10">
            <select multiple="multiple" class="form-control" name="serial-lists[]" id="serial-lists" onchange='multiselect()'>
                <option value="1.0.0.8">1.0.0.8</option>
                <option value="1.0.0.2">1.0.0.2</option>
                <option value="1.0.0.3">1.0.0.3</option>
                <option value="1.0.0.4">1.0.0.4</option>
                <option value="1.0.0.5">1.0.0.5</option>
                <option value="1.0.0.6">1.0.0.6</option>
                <option value="1.0.0.7">1.0.0.7</option>
            </select>
        </div>
    </div>
</div>

此字段是支持的版本字段，它是多选框。

脚本代码:(我试过比较这两个字段的代码）

<script>
    function multiselect() {
        var selectedValues = $('#serial-lists').text();
        var versions = document.getElementById('versions');
        if (selectedValues > versions)
            alert("not valid");
        else if (selectedValues < versions)
            alert("valid");
    }
</script>

但它不起作用。我认为这也没有效率。

Answer 1

尝试比较下面的功能。

<script>
    function multiselect() {
    var opts = $('#serial-lists')[0].options;
    var selectedValues = $.map(opts, function(elem) {
        return (elem.value || elem.text);
    });
    var versions = $('#versions').val();
    for(var i=0; i<selectedValues.length;i++){
        if (selectedValues[i] > versions)
            alert("not valid");
        else if (selectedValues < versions)
            alert("valid");
    }
}
</script>

Answer 2

比较你需要将ip地址转换为整数

function ip2int(string) {
    var parts = string.split(".");

    var sum = 0;

    for(var i = 0; i < 4; i++) {
        var partVal = Number(parts[i]);
        sum = (sum << 8) + partVal;
    }

    return sum;
};

并且在验证中您需要以下内容：

if (ip2int(selectedValues) > ip2int(versions))

您检索值的方式也可能无效如果你调用$('#serial-lists').val();，它将返回一个被选中的值数组，你可以遍历它们。尝试使用console.log值来查看它给出的内容。

修改

function multiselect() { var validIPs = []; var inValidIPs = []; var selectedValues = $('#serial-lists').val(); var versions = $('#versions').val(); for(var i=0; i<selectedValues.length;i++){ if (ip2int(selectedValues[i]) > ip2int(versions)) inValidIPs.push(selectedValues[i]); else if (ip2int(selectedValues[i]) <= ip2int(versions)) validIPs.push(selectedValues[i]); } alert("valid IPs : \n"+validIPs.join("\n")+"\nInvalid IPs : \n"+inValidIPs.join("\n")); }

从多个选定值中，您只能区分有效值和无效值。如果您想要提醒一次，则不应在更改多个选择标记时调用验证，而是调用onblur，即。

<select multiple="multiple" class="form-control" name="serial-lists[]" id="serial-lists" onblur='multiselect()'>

将输入的ipaddress值与laravel中多选框的值进行比较？

2 个答案: