IP屏蔽HTML输入表单与jQuery

IP masking HTML input form with jQuery

本文关键字：jQuery 表单 输入 屏蔽 HTML IP      更新时间：2023-09-26

所以我需要验证一个输入字段来接受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地址?

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

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

这个插件在这里

是这样做的:

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

或相同的-稍短一点:

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

最后一个示例是我的小提琴示例

中使用的最后一行

根据jQuery掩码文档:

0: Only Numbers.

9: Only Numbers but optional.

所以你看到- 099.099.099.099，如果你想在每个小数之间加2个数字009.009.009.009

这个方法对我很有效。

下载路径:[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": "_"
});

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

例如:

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

代码在codepen

相关文章：