IP範囲とIP範囲 - 動的テキストボックス

Question

「IP範囲」から「IP範囲」を入力する2つの動的テキストボックスを追加し、新しいIP範囲とそれらをテストするための検証を挿入するボタンを追加したい範囲。

コードをご提案ください。

あなたの早期返答を待っています。事前に

おかげ Tanu

Answer 1

あなたがもし私があなただったら、私は「テキストボックスリスト」とDIVを作成し、ちょうどdivの後、ボタンが上に新しいテキストボックスを追加するには、jQueryのを使用しAsuming div。ここ

コードの一部である：

<div id="iprange_list"> 


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

そしてだけ動的に一意のID（静的テキスト+ VARをインクリメント）と2入力を含む行を追加するためのID new_iprangeに.click()イベントを追加します。私は "linecontainer"のような各行のクラスを使って一般的な範囲を定義し、上記で使用したインクリメント変数を使ってスパンに "タイトル"プロパティを追加することをお勧めします。

数回クリックした後、あなたの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を検証する正規表現を参照してください。

はその後、追加IpRangeを追加するには

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

2つのテキストボックスの値を比較する必要がある範囲を確認するために、あなたはDOMを使用して新しい要素を作成する必要があります。これは、あなたが望む正確なものではないかもしれません、そのあなたの部分残りを行うには：このすべてがここにjsfiddle

注作業のサンプルを参照してください要約する

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

。

のUPDATE CODE：このサイトはあなたのためのコードを書くために人々を依頼する場所として存在していない

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>