IP範圍從和IP範圍到 - 動態文本框

Question

我想添加兩個動態文本框來輸入「IP範圍從」到「IP範圍到」和一個添加更多按鈕來插入新的IP範圍加驗證來測試那些範圍。

請推薦代碼。

等待您的早期回覆。

由於提前 TANU

Answer 1

Asuming你使用jQuery，如果我是你，我會創建一個「文本列表」一個DIV，只是在div後，一個按鈕在上面添加新的文本框DIV。

這裏是代碼的一部分：

<div id="iprange_list"> 


</div> 
<a href="#" id="new_iprange"><img src="images/plus.png" alt="new ip range image"/></a> 

然後，只需上的ID new_iprange添加.click()事件動態地添加含有2輸入具有獨特的ID（靜態文本+遞增變量）的線。我建議你爲每一行定義一個普通的跨度，比如「linecontainer」，然後用上面使用的增量var爲你的跨度添加一個「title」屬性。

點擊幾下後，你的DIV會看起來像：

<div id="iprange_list"> 
<span class="linecontainer" title="1"><input type="text" id="tbxfrom1" /><input type="text" id="tbxto1" /></span> 
<span class="linecontainer" title="2"><input type="text" id="tbxfrom2" /><input type="text" id="tbxto2" /></span> 
<span class="linecontainer" title="3"><input type="text" id="tbxfrom3" /><input type="text" id="tbxto3" /></span> 
</div> 
<a href="#" id="new_iprange"><img src="images/plus.png" alt="new ip range image"/></a> 

最後，當您驗證表單只使用jQuery的selecter來檢索您的事業部的每一行，並使用.each()你的字裏行間迭代：

$.each($("#iprange_list .linecontainer"), function(i, item) { 
    var currentID = $(item).attr("title"); 
    alert($("#tbxfrom" + currentID).val()); 
    alert($("#tbxto" + currentID).val()); 
}); 

這只是一個想法，我讓你休息一下;）！

Answer 2

要驗證IpAddress，您需要一個正則表達式來執行此操作。

• 請參閱here使用正則表達式來驗證IpAddress。

那就要檢查一下你需要比較兩個文本框的值

if(textbox1.value > textbox2.value){... 

要添加額外的IpRange的範圍內，你需要創建一個使用DOM新的元素。

var newField = document.createElement('input'); 

總結這一切在這裏看到一個工作樣本中jsfiddle

注：這可能不是你想要的確切的東西，是你的一部分做休息。

更新代碼：

SCRIPT

var ipIndex = 1; 
var validIp = /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/; 

function addIpRange(){ 

    var ipDiv = document.getElementById('ipRange'); 
    var newDiv = document.createElement('div'); 

    ipIndex++; 
    newDiv.innerHTML = ipIndex + '. From: <input type="text" name="ipfrom" /> To: <input type="text" name="ipto" /><input type="button" onClick="validate(\'ipRange' + ipIndex + '\');" value="Validate">' 
    newDiv.setAttribute('id', "ipRange" + ipIndex); 
    ipDiv.appendChild(newDiv); 

} 

function validate(id){ 

    var divToCheck = document.getElementById(id); 

    var ipAdress = divToCheck.getElementsByTagName('input'); 
    var ipFrom = document.getElementById(id).childNodes[1].value; 
    var ipTo = document.getElementById(id).childNodes[3].value; 

    if(validIp.test(ipFrom)){ 
     if(validIp.test(ipTo)){ 
      if(ipFrom > ipTo){ 
       alert("Invalid Ip Range"); 
      } else { 
       alert("Valid Ip Range"); 
      } 
     } else { 
      alert("Invalid Ip Address [To]"); 
     } 
    } else { 
     alert("Invalid Ip Address [From]"); 
    }  

} 

HTML

<form name="ipAddress"> 
<div id="ipRange"> 
    <div id="ipRange1"> 
     1. From: <input type="text" name="ipfrom" /> To: <input type="text" name="ipto" /><input type="button" onClick="validate('ipRange1');" value="Validate"> 
    </div> 
</div> 
    <input type="button" value="Add" onClick="addIpRange();"/> 
</form>