我刚刚在 Twitter 上听到这段讨论,由 Dave 发起。
我(编写表单代码):<input id="zip" type="number">
小恶魔(出现在肩膀上):耶!我喜欢这种乐观,发布吧!
我:等等,你为什么在这里?这会让我陷入困境吗?你知道些什么我不知道的?— Dave SPOOPert (@davatron5000) 2018年10月9日
看起来邮政编码只是数字,对吧?所以……
<input id="zip" name="zip" type="number">
优势在于能够利用浏览器提供的免费验证,并在移动设备上触发更有用的基于数字的键盘。
但 Zach 指出,对于邮政编码来说,type="number"
存在问题,因为邮政编码可能包含前导零(例如,波士顿的邮政编码可能是 02119)。 Filament group 还有一个 小型库 用于解决此问题。
正如 Jeremy 建议的那样,这是 inputmode
的完美应用场景。
<input id="zip" name="zip" type="text" inputmode="numeric" pattern="^(?(^00000(|-0000))|(\d{5}(|-\d{4})))$">
但在撰写本文时,其支持度 非常糟糕。
一些人提到尝试为此劫持 type="tel"
,但这也有其自身的缺点,例如拒绝格式正确的 9 位数邮政编码。
因此,尽管邮政编码看起来像数字,但最好将其视为字符串处理。 另一个选择是将其保留为 text
输入,但使用 pattern
强制使用数字,正如 Pamela Fox 所记录的那样。
<input id="zip" name="zip" type="text" pattern="[0-9]*">
正如许多人在评论中指出的那样,值得注意的是,邮政编码的数字模式最适合美国,因为许多其他国家的代码包含数字 *和* 字母。
不要忘记世界其他地区不使用邮政编码……许多地区使用邮政编码,它可以是数字和字母的混合。
我认为,如果可能,最好的解决方案是根据用户选择的国家/地区更改或删除 pattern 属性。 这样,美国等只有数字邮政编码的国家/地区可以进行验证以防止错误,而世界其他地区的用户的输入则不受限制。
虽然邮政编码是数字,但世界其他地区使用邮政编码,它可以是数字和字母的混合。 如果你*只*面向美国用户,那没问题,但如果你面向国际用户,就会出现非常大的问题。
最后一个选项的问题在于,该模式不允许使用连字符,如果你想支持 9 位数邮政编码,则需要连字符。
此外,我认为 Jeremy 在 inputmode 建议中使用的正则表达式模式完全错误。 我很确定它可以像这样简单:
(如果输入恰好是 5 位数字,则匹配;或者,如果输入恰好是 9 位数字,并且第 5 位数字后有一个连字符,则可选匹配)
或者,如果你想非常宽松
(与之前相同,但在前后允许空格,在第 5 位数字后允许空格,并且允许但在第 5 位数字后不需要连字符)
很可惜,移动设备上
input="tel"
的键盘不包含连字符,因为能够为邮政编码输入触发数字键盘会很好。inputmode="numeric"
是否允许使用连字符? 我无法测试它以查看键盘的外观。我不敢相信对这种情况的支持仍然如此糟糕。 我大约 4 年前做过关于此类输入行为的演示文稿!
仍然没有合适的解决方案,我们正在使用诸如 type=”tel” 之类的 hack 来处理网络上最常见的输入类型之一 :(
我想永远不要在美國以外的地方发布? 加拿大的邮政编码包含字母,其他国家/地区的格式也不同。
美国 9 位数邮政编码在前面 5 位数字组和后面 4 位数字组之间有一个连字符。 加拿大邮政编码包含字母,为 6 位数字,并在 3 位数字组之间留有空格。 其他国家/地区的格式也各不相同。 在施加大量结构或限制之前,你需要知道是哪个国家/地区。
顺便提一下,有些地方的邮政编码中甚至可能包含字母。 例如,奥兰群岛在 5 位数字之前有 AX,例如玛丽港的 AX22100。 通常在没有 AX 的情况下也能正常工作,但最终可能会导致与瑞典的 Lund(共享相同的数字(22100))混淆。
还要记住,邮政编码可以使用带连字符的可选 9 位数字格式(zip+4)。 国际邮政编码的长度不同,有些包含空格和字母或长度可变(参见英国和加拿大)。 有些国家/地区根本没有邮政编码。
敏锐的程序员会注意到,并非每个国家/地区都使用全数字邮政编码。
此提案相当特定于美国。 世界大部分地区使用字母和数字组合的邮政编码,并且不称其为邮政编码,因为它是美国邮政服务的商标。 任何 HTML 输入类型都应为 type=”postal”,并且应接受各种模式。 除非你的所有客户都在同一个国家/地区,否则你需要使用开放模式。 或者,在填写国家/地区字段后指定模式。
只需遵循鲁棒性原则并接受所有内容。 通过所有智能匹配,你只是排除了整个地球上的其他地区……
荷兰的邮政编码类似于数字 数字 数字 数字 字母 字母
此外,世界不仅仅是美国。
邮政编码各不相同。 例如,在荷兰,它是 4 个数字和 2 个字母
识别数字的简单方法
“数字”必须有值。
如果用它计算毫无意义,那么它就不是“数字”。
模式“[0-9]*”在国际层面上仅适用于某些邮政编码。
https://en.wikipedia.org/wiki/List_of_postal_codes
其他国家/地区的邮政编码不遵循你建议的格式。
例如,在英国,它类似于 *AB123CD*
https://en.m.wikipedia.org/wiki/List_of_postal_codes
这只是从美国的角度来看才是正确的。 看看英国的邮政编码系统:https://en.wikipedia.org/wiki/Postcodes_in_the_United_Kingdom,它使用字母数字值。
根据你涵盖的国家/地区,你的建议也不起作用,因为某些邮政编码也包含字母数字字符:https://en.wikipedia.org/wiki/Postal_code#Alphanumeric_postal_codes
国际地址的邮政编码等效项(例如,邮政编码)通常包含字母,因此如果你计划服务于美国以外的地区,则需要考虑这一点。
邮政编码的模式取决于你所在的国家/地区。 仅允许数字可能会排除一些国际客户。
邮政编码不是数字。 数字是可以进行计算的实体。 因此,货币和百分比是数字,而邮政编码、房屋和电话号码是字符串。
也不要忘记,世界其他地区在邮政编码中使用字母……使用 type=number 当然会完全失败。我见过不止一次这种情况,并且因为这种错误而无法提供合法的地址信息。另一个相关问题(通常是 js 验证)是不允许非美国电话号码格式,因此无法提供正确的电话号码。这两件事在 2018 年仍然惊人地普遍存在。
如果您支持美国以外的地区,则需要使用字母。英国和爱尔兰的邮政编码都是字母数字的 :)
我以为只有北爱尔兰(无论如何都是英国的一部分)使用邮政编码,而爱尔兰共和国根本不使用邮政编码?
在此作为免责声明添加:这仅适用于美国(以及可能的其他少数国家/地区),但例如在英国,所有邮政编码都包含字母。因此,即使是基本的邮政编码验证也变得更加棘手 :(
请不要将邮政编码字段限制为仅数字。一些国家/地区的邮政编码中包含字母。在荷兰,邮政编码由 4 位数字和 2 个字母组成,例如 3012 KJ。https://en.wikipedia.org/wiki/List_of_postal_codes
请不要这样做(或更改用户国家/地区的相关行为):https://en.wikipedia.org/wiki/Postal_code#Alphanumeric_postal_codes
如果您的目标市场在美国,则可以。但在英国,“邮编”称为“邮政编码”,包含字母、数字和空格。在爱尔兰南部,他们没有邮编/邮政编码系统。如果您的表单需要国际化,则最好不要尝试对其进行验证。
我想这只会适用于美国用户群。我住在荷兰,这里的邮政编码格式为
0000AA
(四个数字,2 个字母)请注意,我们并不都拥有数字邮政编码。
在荷兰,我们使用这种格式:“1234 AB”。
– 4 位数字,不以 0 开头
– 可选空格
– 2 位数字,从不包含 SA/SD/SS
正则表达式将是;
/^[1-9][0-9]{3} ?(?!sa|sd|ss)[a-z]{2}$/i
对于本地网店来说,这可能不是问题,但如果您计划在国外销售,那么对输入进行太多限制可能不是最佳做法;)
国际邮政编码可以/将会包含字母
在许多国家/地区(例如英国)邮政编码中也包含字母!因此,如果您为国际客户设计,那么使用模式也会过于严格
加拿大和许多其他国家/地区的邮政编码中都包含字母,因此数字永远无法用于邮政编码
作为一名英国居民,我不得不处理美国网站(包括要求您输入邮政编码的戴尔支持网站),因此“邮政编码是数字”是一个严重的错误。
英国邮政编码(与其他几个国家的邮政编码相似)包含字母,例如 AB12 3CD,并且还有一些其他有趣的邮政编码。
不要忘记考虑美国以外的地区!英国的“邮编”(对我们来说是邮政编码!)包含字母和数字。如果表单不允许使用字母,我会非常生气。也许可以使用一些智能模式识别来确定代码属于哪个国家/地区,并显示消息或警告。
但也许这有点过头了,一个标签就能解决问题……不过值得考虑!
然后加拿大邮政编码中也有字母(例如:H2R3N9)
在一些欧洲国家/地区,邮政编码可以包含字母和空格,例如:1234 AB
当我进行验证时,我坚持使用 input text,即使这样,它也可能很棘手
嗯……需要特别注意的是,是的,美国拥有仅包含数字的邮政编码。其他国家/地区……则不尽相同。
以英国为例,邮编/邮政编码可能是“WC2N 5DU”。
现在为英国做这件事吧 :P
这太搞笑了,人们都很生气。如果程序员讨厌一件事,那就是对情况的假设 :)
在波兰(以及其他一些中小国家/地区),邮政编码包含连字符(例如,03-123 华沙市,波兰首都)。