IP 地址的正确输入类型

Question

采用 IP 地址的输入字段的最佳做法是什么？

即：数字和点。

我最初选择了type='number'，但是，我注意到只要我输入第二个点.和下一个数字，我的提交按钮就会被禁用。

例如：123.124.4（boom！按钮被禁用）

以上是由于小数点考虑type=number吗？

<input type="number" class="input-box" placeholder="xxx.xxx.xxx.xx" autocomplete="off" />

有没有办法摆脱这个而不去<input type='text'/>？

Answer 1

是的，有一种方法可以使用输入通过 HTML 获取 IP 地址，而不使用文本类型，例如类型编号。这些选项需要四个输入框，每个八位字节一个。

由于没有与 IPv4 地址完全匹配的 HTML 输入类型，如果您想坚持使用单个输入字段，则文本类型相对简单，具有 minlength、maxlength 和 pattern 属性。

裸骨 HTML：

<input type="text" minlength="7" maxlength="15" size="15" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$">

出于安全原因，请确保您始终验证提交的数据服务器端，而不仅仅是客户端。您可以使用相同的正则表达式模式。

* 2019 年3 月 2 日更新 *添加了三种 IPv6 地址正则表达式格式。

只接受长格式的 IPv6 地址：

<input type="text" pattern="^([0-9a-fA-F]{4}:){7}[0-9a-fA-F]{4}$">

接受长格式和中格式 IPv6 地址（中格式允许前导零）：

<input type="text" pattern="^([0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}$">

接受长格式和中等格式的 IPv6 地址（没有前导零的中等格式）：

<input type="text" pattern="^(([0-9a-fA-F]{1}|[1-9a-fA-F]{1}[0-9a-fA-F]{1,3}):){7}([0-9a-fA-F]{1}|[1-9a-fA-F]{1}[0-9a-fA-F]{1,3})$">

Answer 2

在 HTML 中，您可以使用模式验证输入值。这样，您可以使用正则表达式制作如下内容：

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