正确的IP地址输入类型

问题描述 投票:0回答:2

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

即:数字和点。

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

例如:123.124.4(禁用了!!按钮)

以上是由于type=number的十进制考虑?

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

如果不与<input type='text'/>一起出去,有没有办法解决这个问题?

html5
2个回答
4
投票

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

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

3
投票

是的,有一种方法可以使用输入通过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])$">

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

*更新2010年3月2日*添加了三种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})$
© www.soinside.com 2019 - 2024. All rights reserved.