Диапазон IP-адресов и диапазон IP-адресов - динамическое текстовое поле

Question

Я хочу добавить два динамических текстовых поля для ввода «Диапазон IP-адресов от» до «Диапазон IP-адресов до» и еще одну кнопку для добавления нового диапазона IP-адресов плюс проверки для проверки этих диапазонов.

Пожалуйста, предложите код.

В ожидании вашего скорого ответа.

Заранее спасибо Tanu

Answer 1

Если вы используете jQuery, на вашем месте я бы создал DIV с «textbox-list» и сразу после div, кнопку для добавления нового текстового поля в вышеупомянутый div.

Вотчасть кода:

<div id="iprange_list">


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

Затем просто добавьте событие .click() для идентификатора new_iprange, чтобы динамически добавить строку, содержащую 2 ввода с уникальным идентификатором (статический текст + приращение переменной).Я предлагаю вам определить общий диапазон с классом для каждой строки, например, "linecontainer", а затем просто добавить свойство "title" к вашему диапазону с помощью приращения var, использованного выше.

После нескольких щелчков ваш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 для извлечения каждой строки в вашем Div и используйте .each() для перебора между вашими строками:

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

Это просто идея, я позволю вам сделать все остальное;)!

Answer 2

Для проверки IpAddress вам необходимо сделать регулярное выражение.

• См. здесь образец регулярного выражения для проверки IpAddress.

Затем, чтобы проверить диапазон, вам нужно сравнить значение двух текстовых полей

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

Чтобы добавить дополнительный IpRange, вам нужно создать новый элемент с использованием DOM.

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

Чтобы подвести итог всего этого см.рабочий образец здесь, в jsfiddle

Примечание: это может быть не совсем то, что вы хотите, это ваша часть, чтобы сделать все остальное.

КОД ОБНОВЛЕНИЯ:

СЦЕНАРИЙ

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>