javascript - 如何验证多个输入的 IP 地址？
问题描述
我正在尝试检查我通过 an 提交的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>
解决方案
您可能希望将算法包装在可重用的函数中
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 中，在 input 元素上附加一个 onchange 事件，然后在用户完成更改输入时执行单独的验证
<input type="text" name="networkName" value="" pattern=".{5,30}" title="Enter between 5 and 30 characters" onchange="ValidateIPaddressOnChange(this, 'ipaddress')" />
您可以保留旧的验证功能，该功能实际上会在提交时验证所有内容，这也很好。显然有更好的方法可以做到这一点，但就目前而言，这与你已经开始的做法没有太大区别。
推荐阅读
- java - do/while 循环的问题
- java - Google 协议缓冲区无法正确读取
- r - .tsv 文件中的表情符号正在破坏 read.table() 并添加行
- google-api - 我有 google+ 用户 ID。但现在 google+ 已关闭。那么如何使用 google+ id 获取电子邮件 ID？
- react-native - Android React Native 上的启动画面后出现白色闪烁
- android - CorruptedCacheException：在缓存'/Users/macuser/.gradle/caches/journal-1/file-access.bin'中发现损坏的IndexBlock 298298
- regex - 贪婪的正则表达式量词与密码条件不匹配
- scrapy - 亚马逊评论：列表索引超出范围
- python - Jupyter 笔记本单元卡在 [*] 上，运行了两次然后停止工作
- css - 由于屏幕英寸而改变页面样式