采用IP地址的输入字段的最佳做法是什么?
即:数字和点。
我最初选择了type='number'
,但是,我注意到,只要我输入第二个点.
后跟下一个数字,我的提交按钮就会被禁用。
例如:123.124.4(禁用了!!按钮)
以上是由于type=number
的十进制考虑?
<input type="number" class="input-box" placeholder="xxx.xxx.xxx.xx" autocomplete="off" />
如果不与<input type='text'/>
一起出去,有没有办法解决这个问题?
在HTML中,您可以使用模式验证输入值。这样,您可以使用正则表达式创建一些内容,如下所示:
<input required pattern="^([0-9]{1,3}\.){3}[0-9]{1,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})$