2017-07-10 28 views
0

查看代碼:將輸入的ipaddress值與laravel中多選框的值進行比較?

<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> 

這是手動輸入ip地址我輸入字段。 輸入此字段的值時,我需要檢查多選框(下面提到)中的值是否低於輸入的IP地址格式。

Script代碼:

<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> 

我在這裏使用正則表達式驗證輸入ip地址格式。

相同的看法代碼:

<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代碼:(代碼我已經嘗試了比較這兩個字段)

<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> 

但它無法正常工作。另外我認爲它也不高效。

+0

更多細節需要樣品測試案例 –

+0

它應該是'的document.getElementById( '版本')。value' –

回答

0

爲comparsion你需要轉換的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()'> 
+0

Upvoted你的答案!我可否知道左移8的目的是什麼? –

+1

ipv4地址有4個由點分隔的「部分」。每個部分的值都是0-255。如果你只是將4個部分相加,它不會是唯一的 左移8表示你將結果乘以256.其基本上類似於十進制數字,十進制數字,幾百進制數字但高位數 –

+0

好的,我明白了你的觀點。在二進制ip中格式化爲「xxxxxxxx.xxxxxxxx.xxxxxxxx.xxxxxxxx」。在你的函數中,我們只是刪除它之間的點,並得到它的小數點。腦力激盪的邏輯! –

2

改爲調用嘗試比較功能如下圖所示。

<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> 
+0

它的工作原理。但我不想將它與多選框的選定值進行比較。我需要將其與多選框的所有值進行比較 –

+0

它適用於多選框的所有值 –

+0

它在這裏循環。不需要循環。它需要完全檢查多選框並只發出一次警報。 –

相關問題