堆棧內存溢出
  簡體   English   中英

如何驗證多個輸入上的IP地址？

[英]How to validate IP Address on multiple inputs?

 原文  2019-07-08 09:47:29  9   2    javascript/ html

問題描述

我正在嘗試檢查通過input type="text"提交的input type="text"是否是有效的IP地址。

我在網上找到了用於JS IP驗證的示例 ，但僅用於一個輸入，我有4個。

輸入： 

        <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>

JS： 

    <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>

如您所見，我沒有任何return(true) 。 我需要嗎？

另外，這使我需要輸入所有值才能實際檢查它們。

還有其他方法可以單獨檢查它們嗎？

我也在這里找到了一些正則表達式規則： 

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]))$"

它們似乎有效，但是我想嘗試使用JS。

響應： 

<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>

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

2 個解決方案

解決方案1
 1 已采納  2019-07-08 10:11:12

您可能希望將算法包裝在可重用的函數中 

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元素上，然后在用戶完成更改輸入時將執行單獨的驗證 

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

您可以保留舊的驗證功能，即實際上驗證提交時的所有內容，這也很好。 顯然有更好的方法可以做到這一點，但是就目前而言，這可以做到與已經開始的內容沒有太大的差異。

解決方案2
 0  2019-07-08 10:19:15

您可以使用match()將正則表達式與輸入匹配，並檢查其格式是否正確

有效IP地址示例

115.42.150.37

192.168.0.1

110.234.52.124 

 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; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input class="ip" /><br> <input class="ip" /><br> <input class="ip" /><br> <input class="ip" /><br> <button onClick="check()">Check ip address</button>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何驗證IP地址是否正確？ 如何驗證表單中的多個輸入 驗證IP地址/網絡掩碼 如何驗證多個分組輸入？ 如何使用不同的值驗證多個輸入 在 React Native 中驗證 IP 地址 嘗試用 javascript 驗證 IP 地址 如何使用正則表達式以自定義格式驗證IP地址 驗證IP地址不是0.0.0.0或多播地址 如何不驗證某些輸入
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM