如何验证多个输入上的IP地址?

时间:2019-07-08 09:47:29

标签: javascript html

我正在尝试检查通过{'doc_1': {'hope': 0.16666666666666666, 'court': 0.3333333333333333}, 'doc_2': {'hope': 0.2, 'court': 0.2}, 'doc_3': {'hope': 0.08333333333333333, 'mention': 0.08333333333333333}} 提交的内容是否是有效的IP地址。

我在网上找到this example来进行JS IP验证,但这仅用于一个输入,我有4个。

输入:

input type="text"

JS:

        <form method="POST" name="simple_form" action="/staticIP" onsubmit="return ValidateIPaddress()">
            <div class ="text_input">
                <input type="text" placeholder="Network Name (SSID)" name="networkName" value="" pattern=".{5,30}" title="Enter between 5 and 30 characters">
            </div>        
            <div class="text_input">            
                <input type="password" placeholder="Password" name="networkPassword" value="" minlength="8" pattern=".{8,63}" title="Enter between 8 and 63 characters">
            </div>
            <div class ="text_input">
                <input type="text" placeholder="IP Address" name="ipAddress" value="" required>
            </div>        
            <div class="text_input">            
                <input type="text" placeholder="Gateway" name="gateway" value="" required>
            </div>
            <div class ="text_input">            
                <input type="text" placeholder="Subnet Mask" name="subnet" value="" required>
            </div>
            <div class ="text_input">            
                <input type="text" placeholder="DNS" name="dns" value="" required>
            </div>                 
            <input class="button" type="submit" name="" value="Save and Reboot">
        </form>

如您所见,我没有任何 <script> function ValidateIPaddress() { var ipformat = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/; var ipaddr = document.forms["simple_form"]["ipAddress"]; var gateway = document.forms["simple_form"]["gateway"]; var subnet = document.forms["simple_form"]["subnet"]; var dns = document.forms["simple_form"]["dns"]; var counter = 0; if(ipaddr.value.match(ipformat)) { ipaddr.focus(); } else { window.alert("You have entered an invalid IP Address!"); ipaddr.focus(); return (false); } if(gateway.value.match(ipformat)) { gateway.focus(); } else { window.alert("You have entered an invalid GATEWAY Address!"); gateway.focus(); return (false); } if(subnet.value.match(ipformat)) { subnet.focus(); } else { window.alert("You have entered an invalid SUBNET Address!"); subnet.focus(); return (false); } if(dns.value.match(ipformat)) { dns.focus(); } else { window.alert("You have entered an invalid DNS Address!"); dns.focus(); return (false); } } </script> 。我需要吗?

此外,这使我需要输入所有值才能真正检查它们。

还有其他方法可以单独检查它们吗?

我还发现了一些正则表达式规则here

return(true)

它们似乎起作用,但是我想尝试使用JS。

响应:

pattern = " (?<!\S)((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\b|\.\b){7}(?!\S) "
/* or */
pattern="^([1-9]|[1-9]\d|1\d\d|2([0-4]\d|5[0-5]))\.(\d|[1-9]\d|1\d\d|2([0-4]\d|5[0-5]))\.(\d|[1-9]\d|1\d\d|2([0-4]\d|5[0-5]))\.(\d|[1-9]\d|1\d\d|2([0-4]\d|5[0-5]))$"
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>

    <script>
        function ValidateIPaddressOnChange(input, type) 
        {
            var ipformat = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;

            switch(type){
                case "ipaddress": type = "IP Address"; break;
                case "gateway": type = "Gateway"; break;
                case "subnet":  type = "Subnet Mask"; break;
                case "dns": type = "DNS"; break;
            }

            if(!input.value.match(ipformat)) {
                document.getElementById(input.name).className =
                    document.getElementById(input.name).className.replace
                    ( /(?:^|\s)correct(?!\S)/g , '' )
                document.getElementById(input.name).className += " wrong";
                input.focus();
                alert(type + " is invalid!");
                return(false);
            }
            else if(input.value != null){
                document.getElementById(input.name).className =
                    document.getElementById(input.name).className.replace
                    ( /(?:^|\s)wrong(?!\S)/g , '' )                
                document.getElementById(input.name).className += " correct";
            }
        }

        function ValidateIPaddress()
        {
            var ipformat = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
            var ipaddr = document.forms["simple_form"]["ipAddress"];
            var gateway = document.forms["simple_form"]["gateway"];
            var subnet = document.forms["simple_form"]["subnet"];
            var dns = document.forms["simple_form"]["dns"];
            var counter = 0;

            if(ipaddr.value.match(ipformat)) {
                ipaddr.focus();
            } else {
                alert("You have entered an invalid IP Address!");
                ipaddr.focus();
                return (false);
            }
            if(gateway.value.match(ipformat)) {
                gateway.focus();
            } else {
                window.alert("You have entered an invalid GATEWAY Address!");
                gateway.focus();
                return (false);
            }            
            if(subnet.value.match(ipformat)) {
                subnet.focus();
            } else {
                window.alert("You have entered an invalid SUBNET Address!");
                subnet.focus();
                return (false);
            }            
            if(dns.value.match(ipformat)) {
                dns.focus();
            } else {
                window.alert("You have entered an invalid DNS Address!");
                dns.focus();
                return (false);
            }
        }
    </script>

2 个答案:

答案 0 :(得分:1)

您希望将算法包装在可重用的函数中

function ValidateIPaddressOnChange(input, type) 
{
    var ipformat = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;

    var strtype = "";

    switch(type){
        case "ipaddress": strtype = "IP Address"; break;
        case "gateway": strtype = "gateway"; break;
        case "dns": strtype = "DNS"; break;
        case "subnet":  strtype = "subnet mask"; break;
    }

    if(!input.value.match(ipformat)) {
        input.focus();
        alert("You have entered an invalid " + strtype + " format!");
    }
}

在您的HTML中,在输入元素上附加一个onchange事件,该事件将在用户完成更改输入时执行一次单独的验证

<input type="text" name="networkName" value="" pattern=".{5,30}" title="Enter between 5 and 30 characters" onchange="ValidateIPaddressOnChange(this, 'ipaddress')" />

您可以保留旧的验证功能,即实际上验证提交时的所有内容,这也很好。有显然更好的方法可以做到这一点,但就目前而言,这可以与已经开始的工作没有太大的差异。

答案 1 :(得分:0)

您可以使用POST将正则表达式与输入匹配,并检查其格式是否正确

有效IP地址的示例

115.42.150.37

192.168.0.1

110.234.52.124

match()
var pattern = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;

function check() {
  $.each($(".ip"), function() {
    if (!$(this).val().match(pattern)) {
      $(this).addClass("wrong");
      $(this).removeClass("correct");
    } else {
      $(this).addClass('correct');
      $(this).removeClass("wrong");
    }
  });
}
.wrong {
  color: red;
}

.correct {
  color: green;
}