基于jQuery的IP掩蔽HTML输入表单

Question

因此，我需要验证输入字段以接受IP地址。

<form method="POST">
    <input type='text' placeholder='xxx.xxx.xxx.xxx' name='IP'>
</form>

由于属性type没有IP值，我需要使用Javascript或某些客户端语言验证它。我已经使用一个jQuery片段访问了掩码库。

jQuery(function($){
   $("input").mask("9?99.9?99.9?99.9?99", {placeholder:" "});
});

然而，这对我来说是行不通的。这里是我如何包含脚本(只是为了指出)。

<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="https://raw.githubusercontent.com/digitalBush/jquery.maskedinput/1.3.1/dist/jquery.maskedinput.js" type="text/javascript"></script>

而且，即使我设法使这个工作，它仍然不是最好的选择，因为两个数字的部分的IP地址将无法正确地呈现(即84.55.11.499)。所以我的问题是：

1. 为什么上面的代码不是在我的终端上工作，而是在JSFiddle上工作？
2. 如何使用掩码库过滤两位数字IP地址？

Answer 1

我知道已经晚了，我知道你需要jQuery，但万一你不知道在HTML5中你可以使用模式属性，并有规律的表示.

例如：

<input required pattern="^([0-9]{1,3}\.){3}[0-9]{1,3}$">

定期的表示将验证IP地址，例如：

xxx.xxx.xxx.xxx
x.x.x.x
xx.xx.xx.xx
x.xx.xxx.xx

Answer 2

我看到你已经在使用jQuery插件了--试试这个有一个完全工作的IP掩码的插件

这个插件

就这样做了：

 $('.ip_address').mask('0ZZ.0ZZ.0ZZ.0ZZ', {translation: {'Z': {pattern: /[0-9]/, optional: true}}});

或者同样的--稍微短一点：

 $('.ip_address').mask('099.099.099.099');

最后一个示例是我的小提琴示例中使用的最后一行

根据jQuery掩码文档：

只有数字。

9:只有数字，但可选。

所以您可以看到- 099.099.099.099，如果您想在每个十进制009.009.009.009之间强制使用2位数字

Answer 3

我知道这篇文章很古老，但我认为下面的代码是正确的答案。

例如：

<input type="text" class="form-input" id="ipv4" name="ipv4" placeholder="xxx.xxx.xxx.xxx"/>

Jquery代码

var ipv4_address = $('#ipv4');
ipv4_address.inputmask({
   alias: "ip",
   "placeholder": "_"
});

代码中的这段代码