使用jQuery的IP掩码HTML输入表单

8aqjt8rx 于 2023-05-17 发布在 jQuery

关注(0)|答案(4)|浏览(130)

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

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

由于属性type没有IP值，我需要使用Javascript或一些客户端语言对其进行验证。我已经使用mask library到达了这个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上可以？
1.如何使用掩码库过滤两位数IP地址？

jquery

来源：https://stackoverflow.com/questions/24392544/ip-masking-html-input-form-with-jquery

4条答案

按热度按时间

sqyvllje1#

我知道已经晚了，我知道你需要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

赞(0）回复(0）举报 2023-05-17

ctrmrzij2#

我看到你已经在使用一个jQuery插件-试试这个有一个完全工作的IP掩码的插件
This plugin here
它是这样做的：

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

或相同的-稍短的：

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

最后一个示例是我的fiddle示例中使用的最后一行
根据jQuery mask docs：
0：只有数字。
9：只有数字，但可选。
因此，如果您希望在每个小数点009.009.009.009之间强制插入两位数，则可以看到-099.099.099.099

赞(0）回复(0）举报 2023-05-17

nqwrtyyt3#

这个解决办法对我很有效。
从以下位置下载此js文件：[https：//rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js]或[https：//github.com/shahram4m/blogfy/blob/main/static/js/jquery.inputmask.bundle.js]并将其引用到您的页面。然后使用这个Jquery代码：

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

赞(0）回复(0）举报 2023-05-17

zvokhttg4#

我知道这篇文章是旧的，但我认为下面的代码是正确的答案.
例如：

<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": "_"
});

This code in codepen

赞(0）回复(0）举报 2023-05-17

我来回答

使用jQuery的IP掩码HTML输入表单

4条答案

相关问题

热门标签

最新问答