Question

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

即：数字和点。

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

ex：123.124.4（禁用繁荣！按钮）

对于type=number？

，上述是否由于十进制考虑

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

如果不与<input type='text'/>合作，有没有办法解决这个问题？

Answer 1

在HTML中，您可以使用模式验证输入值。这样，您可以使用正则表达式创建一些内容，如下所示：

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

Answer 2

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

因为没有HTML输入类型可以完全匹配IPv4地址，并且如果要坚持使用单个输入字段类型，则文本的最小长度，最大长度和模式属性相对简单。

裸露的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])$">

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

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

仅接受长格式的IPv6地址：

^([0-9a-fA-F]{4}:){7}[0-9a-fA-F]{4}$

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

^([0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}$

接受长和中等格式的IPv6地址（不带前导零的中号）：

^(([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 3

这对我有用

    9     <mat-form-field class="form-element">
    8     ⎸ <input
    7     ⎸   matInput
    6     ⎸   placeholder="Ip"
    5     ⎸   name="ip"
    4     ⎸   [(ngModel)]="ip"
    3     ⎸   required
    2     ⎸   pattern="^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$"
    1     ⎸   [disabled]="data.btnDisabled"
  30      ⎸ />
    1     </mat-form-field>

Answer 4

这对我有用，使用@ptay 的答案。在他的回答中，可以添加 IP 值，例如 02.09.08.07

<input required pattern="^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$">

正确的IP地址输入类型

4 个答案: