Question

我想添加两个动态文本框以输入“IP Range From”到“IP Range To”，并添加一个按钮以插入新的IP Range和验证来测试这些范围。

请建议代码。

等待你的早期回应。

先谢谢 TANU

Answer 1

假设您使用jQuery，如果我是你，我会使用“textbox-list”创建一个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 .click()上添加一个new_iprange事件，动态添加一行，其中包含2个带唯一ID的输入（静态文本+增量变量）。我建议你用每行的一个类定义一般跨度，比如“linecontainer”，然后用你上面使用的增量变量为你的跨度添加一个“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检索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，您需要使用正则表达式来执行此操作。

请参阅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>

IP范围从和IP范围到 - 动态文本框

2 个答案: