正确的IP地址输入类型 [英] Correct input type for IP Address

问题描述

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

What is the best practice for an input field that takes an IP-Address?

即:数字和点.

我最初选择了 type ='number'，但是，我注意到，只要输入 second 点.按下一个数字，我的提交"按钮将被禁用.

I've initially chosen type='number', However, I noticed that as soon as I type a second dot . followed by the next number, my submit button gets disabled.

例如:123.124.4(关闭了轰！"按钮)

以上是由于 type = number 时使用十进制考虑的原因吗?

Is the above due to a decimal consideration when it comes to type=number ?

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

有没有一种解决方法，而无需使用< input type ='text'/> ?

Is there a way out of this without going with <input type='text'/> ?

推荐答案

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

Yes, there is a way to take an IP address via HTML using input without using text type, like a type number. The options would require four input boxes, one for each octet.

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

Since there is no HTML input type that matches IPv4 address exactly and if you want to stick to a single input field type text is relatively simple with minlength, maxlength, and pattern attributes.

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

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

For security reasons ensure you always validate submitted data server side, not just client side. You can use same regex pattern.

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

* Update 3/2/2019 * Added three IPv6 address regex formats.

仅接受长格式的IPv6地址:

Only accepts IPv6 addresses in long form:

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

接受长和中等格式的IPv6地址(中等允许前导零):

Accepts long and medium form IPv6 addresses (medium allows leading zeros):

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

接受长和中等格式的IPv6地址(不带前导零的中号):

Accepts long and medium form IPv6 addresses (medium without leading zeros):

<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})$">

这篇关于正确的IP地址输入类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！