如何使用HTML5输入验证验证表单输入

Question

我已经尝试找到一个完整的模式列表,用于通过各种类型的HTML5表单验证验证输入,特别url是email,tel等等,但我找不到任何模式.目前,这些输入验证的内置版本远非完美(tel甚至不检查您输入的内容是否是电话号码).所以我想知道,我可以使用哪些模式来验证用户是否在输入中输入了正确的格式？

以下是一些默认验证允许不允许输入的情况示例:

type="email"

此字段允许在@之后具有不正确域的电子邮件,并且它允许地址以短划线或句点开始或结束,这也是不允许的.所以,.example-@x是允许的.

type="url"

此输入基本上允许以http://(Chrome)开头的任何输入,后跟除了一些特殊字符之外的任何内容,例如在URL(\,@,#,〜等)中具有功能的特殊字符.在FF中,所有检查的是它是否以http:,除了之后的任何其他内容:(即使只是http:在FF中允许).IE与FF相同,只是它不允许http::.

例如:http://.允许所有三个.等等http://,.

type="tel"

目前在任何主流浏览器中都没有针对电话号码的内置验证(type="text"除了告诉移动浏览器要显示哪种类型的键盘之外,其功能与100%相同).

---

因此,由于浏览器在每种情况下都没有显示一致的行为,并且由于它们显示的行为是非常基本的,有很多误报,我可以做些什么来验证我的HTML表单(仍然使用HTML5输入验证)？

---

PS:我发布这个是因为我觉得自己有一个完整的表单验证模式列表很有用,所以我认为它也可能对其他人有用(当然其他人也可以发布他们的解决方案).

Answer 1

这些模式不一定简单,但这是我认为在任何情况下都最好的模式.请记住(最近)国际化域名(IDN)也可用.这样,URL中允许使用不可测试的字符数量(域名中仍然存在大量不允许的字符,但允许的字符列表如此之大,并且会经常针对不同的顶级字符进行更改域,跟上它们是不切实际的).如果要支持国际化域名,则应使用第二个URL模式,否则,请使用第一个.

TL; DR:

这是一个现场演示,可以看到以下模式.向下滚动以获得对这些模式的解释,推理和分析.

网址

https?:\/\/(?![^\/]{253}[^\/])((?!-.*|.*-\.)([a-zA-Z0-9-]{1,63}\.)+[a-zA-Z]{2,15}|((1[0-9]{2}|[1-9]?[0-9]|2([0-4][0-9]|5[0-5]))\.){3}(1[0-9]{2}|[1-9]?[0-9]|2([0-4][0-9]|5[0-5])))(\/.*)?
https?:\/\/(?!.{253}.+$)((?!-.*|.*-\.)([^ !-,\.\/:-@\[-`{-~]{1,63}\.)+([^ !-\/:-@\[-`{-~]{2,15}|xn--[a-zA-Z0-9]{4,30})|(([01]?[0-9]{2}|2([0-4][0-9]|5[0-5])|[0-9])\.){3}([01]?[0-9]{2}|2([0-4][0-9]|5[0-5])|[0-9]))(\/.*)?

电子邮件

(?!(^[.-].*|[^@]*[.-]@|.*\.{2,}.*)|^.{254}.)([a-zA-Z0-9!#$%&'*+\/=?^_`{|}~.-]+@)(?!-.*|.*-\.)([a-zA-Z0-9-]{1,63}\.)+[a-zA-Z]{2,15}

电话号码

((\+|00)?[1-9]{2}|0)[1-9]( ?[0-9]){8}
((\+|00)?[1-9]{2}|0)[1-9]([0-9]){8}

西式名字

([A-Z?-?À-ÖØ-Þ][A-Z?-?À-ÖØ-Þa-z?-?ß-öø-ÿ]{1,19} ?){1,10}

URL,没有IDN支持

https?:\/\/(?![^\/]{253}[^\/])((?!-.*|.*-\.)([a-zA-Z0-9-]{1,63}\.)+[a-zA-Z]{2,15}|((1[0-9]{2}|[1-9]?[0-9]|2([0-4][0-9]|5[0-5]))\.){3}(1[0-9]{2}|[1-9]?[0-9]|2([0-4][0-9]|5[0-5])))(\/.*)?

说明:

• DNSes
  • URL应始终以http://或https://开头,因为我们不希望链接到其他协议.
  • 域名不应以开头或结尾开头 -
  • 域名每个最多可以包含63个字符(每个点之间最多63个字符),并且总长度(包括点数)不能超过253(或255？安全并在253下注)字符^[1].
  • 非IDN只能支持拉丁字母的字母,数字0到9以及短划线.
  • 非IDN的顶级域只包含至少拉丁字母的字母^[2].
  • 我设置了15个字母的任意限制,因为目前没有超过13个字符(" .international")的域名,这很可能不会很快改变.
• IP地址
  • 特殊情况下,如0.0.0.0,127.0.0.1等不检查
  • 不允许在其中填充零的IP(例如01.1.1.1)^[4].
  • IP号码只能从0到255.不允许256.

请注意,http:.*现在浏览器中内置的默认模式将始终强制执行,因此即使您https?://在此模式中删除了该模式,它仍将被强制执行.使用type="text"以避免它.

URL,具有IDN支持

https?:\/\/(?!.{253}.+$)((?!-.*|.*-\.)([^ !-,\.\/:-@\[-`{-~]{1,63}\.)+([^ !-\/:-@\[-`{-~]{2,15}|xn--[a-zA-Z0-9]{4,30})|(([01]?[0-9]{2}|2([0-4][0-9]|5[0-5])|[0-9])\.){3}([01]?[0-9]{2}|2([0-4][0-9]|5[0-5])|[0-9]))(\/.*)?

说明:

由于IDN中允许存在大量字符,因此实际上不可能在HTML属性中列出每个可能的组合(您将获得一个巨大的模式,因此在这种情况下,通过其他方法测试它会好得多比正则表达式)^[5].

• 域名中不允许的字符包括:!"#$%&'()*+, ./ :;<=>?@ [\]^_`` {|}~作为域分隔符的句点除外.
  • 这些在范围内匹配[!-,] [\.\/] [:-@] [\[-``] [{-~].
• 此输入字段中允许使用所有其他字符
• 允许TLD在其中包含相同的字母,最多15个字符的任意限制(与非IDN URL一样).
• 可替代地,顶级域名可以是格式xn--*与*作为实际TLD的编码版本.此编码每个原始字符使用2个拉丁字母或阿拉伯数字,因此此处的任意限制加倍为30.

电子邮件地址

(?!(^[.-].*|[^@]*[.-]@|.*\.{2,}.*)|^.{254}.)([a-zA-Z0-9!#$%&'*+\/=?^_`{|}~.-]+@)(?!-.*|.*-\.)([a-zA-Z0-9-]{1,63}\.)+[a-zA-Z]{2,15}

说明:

由于电子邮件地址需要比这种模式更多的100%万无一失,因此这将覆盖接近完整的100%.确实存在 100%完整模式,但包含PCRE(PHP) - 仅正则表达式前瞻,因此它不适用于HTML表单.

• 电子邮件地址只能包含拉丁字母,数字0-9和!#$%&'*+\/=?^_``{|}~.- ^[6]中的字符.
• 口音不是普遍支持的^[7],但如果需要,发表评论,我也许可以写一个符合RFC 6530标准的版本.
• 本地部分(之前@只能是63个字符,总地址长度只能是254个字符^[8].
• 地址可能不会以-或开始或结束.,并且连续不会出现两个点^[8].
• 域可能不是IP地址^[9].
  • 除此之外,我只包括模式的非IDN部分.也允许使用IDN,因此这些将导致漏报.

电话号码

((\+|00)?[1-9]{2}|0)[1-9]( ?[0-9]){8}
((\+|00)?[1-9]{2}|0)[1-9]([0-9]){8}

说明:

• 电话号码必须以下列之一开头,其中[CTRY]代表国家代码,X代表第一个非零数字(例如6手机号码),
  • 00[CTRY]X
  • +[CTRY]X
  • 0X
  • [CTRY]X (这不是官方正确的语法,但Chrome Autofill似乎出于某种原因喜欢它.)
• 数字之间允许有空格(参见无空间版本的第二个模式),除了上面定义的非零X之外.
• 除了上面定义的第一个非零X之前的部分之外,电话号码必须正好是9位数.

此正则表达式仅适用于10位数的电话号码.由于不同国家/地区的电话号码长度可能不同,因此最好使用此模式的不太严格的版本,或将其修改为适用于所需国家/地区.因此,这种模式通常应该用作一种模板模式.

额外:西式名字

([A-Z?-?À-ÖØ-Þ][A-Z?-?À-ÖØ-Þa-z?-?ß-öø-ÿ]{1,19} ?){1,10}

是的,我知道,我是非常以西方为中心,但这也可能有用,因为它也可能很难做到,如果你也为西方人建立一个网站,这将永远有效(亚洲人)名称也有这种格式的表示.

• 所有名称必须以大写字母开头
• 大写字母可能出现在名称的中间(例如John McDoe)
• 名称长度必须至少为2个字母
• 我已经设置了任意最多10个名字(这些人可能不会介意),每个名字最长可达20个字母("Werbenjagermanjensen"的长度,恰好是#1).
• 允许使用拉丁文和希腊文字母,包括所有重音拉丁文和希腊字母(列表)和冰岛字母(ÐÞ ðþ):
  • A-Z 匹配所有大写拉丁字母: ABCDEFGHIJKLMNOPQRSTUVWXYZ
  • ?-?匹配所有大写希腊字母,包括重音字母:??????????? ????????????????????????? ??.
  • À-ÖØ-Þ匹配所有大写的重音拉丁字母,以及d和TH: ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØÙÚÛÜÝÞ.在它们之间还有角色×(在Ö和之间Ø),这就是这样做的.
  • a-z 匹配所有小写拉丁字母: abcdefghijklmnopqrstuvwxyz
  • ?-? 匹配所有小写希腊字母,包括重音字母: ???????????????????????????????????
  • ß-öø-ÿ比赛全部小写的重音拉丁字母,和SS,d和TH: ßàáâãäåæçèéêëìíîïðñòóôõöøùúûüýþÿ.在它们之间还有角色÷(在ö和之间ø),这就是这样做的.

参考

1. https://en.wikipedia.org/wiki/Domain_Name_System#Domain_name_syntax →交通 https://tools.ietf.org/html/rfc1034#section-3.1
2. https://en.wikipedia.org/wiki/List_of_Internet_top-level_domains/https://www.icann.org/resources/pages/tlds-2012-02-25-en
3. https://en.wikipedia.org/wiki/Domain_name#Technical_requirements_and_process/子域中允许的字符是什么
4. 基于以下事实:浏览器和Windows cmd行都不允许填充格式.
5. 子域中允许的字符是什么 → http://www.domainnameshop.com/faq.cgi？id = 8&session = 106ee5e67d523298
6. https://en.wikipedia.org/wiki/Email_address#Local_part/电子邮件地址允许使用哪些字符？
7. https://en.wikipedia.org/wiki/Email_address#Internationalization
8. https://en.wikipedia.org/wiki/Email_address#Syntax →交通 http://tools.ietf.org/html/rfc5321#section-4.5.3.1
9. 使用IP地址而不是域名发送电子邮件