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

Question

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

以下是一些默认验证允许不允许的输入的例子：

这个字段允许在@后面有不正确域的电子邮件，它允许地址以破折号或句号开始或结束，这也是不允许的。因此，.example-@x是允许的。

这个输入基本上允许任何以http://(Chrome)开头，后面跟着一些特殊字符的输入，比如在URL中有函数的字符(\，@，#，~等）。在FF中，所要检查的是它是否以http://code>开头，后面是:以外的任何内容（在FF中甚至只允许http://code>)。IE的功能与FF相同，只是它不禁止http://code>。

例如:http://.在这三个选项中都是允许的。http://，也是如此。

目前，在任何主要浏览器中都没有对电话号码进行内置验证（它的功能与type=“text”完全相同，只是告诉移动浏览器要显示哪种键盘。

因此，既然浏览器在每种情况下都不显示一致的行为，而且它们所显示的行为是非常基本的，带有许多假阳性，那么我可以做什么来验证我的HTML表单（仍然使用HTML5输入验证）？

PS：我发布这个是因为我会发现自己有一个完整的表单验证模式列表很有用，所以我想这对其他人也很有用（当然其他人也可以发布他们的解决方案）。




Answer 1

这些模式不一定很简单，但我认为在每种情况下都是最有效的。请记住，（最近）国际化域名也是可用的。这样，URL中就允许不可测试的字符数量（域名中仍然存在许多不允许的字符，但是允许的字符列表非常大，并且对于不同的顶级域会经常变化，因此跟上它们是不实际的）。如果要支持国际化域名，则应使用第二种URL模式，否则使用第一种。

下面是一个现场演示，可以看到下面的模式在起作用。向下滚动以获得对这些模式的解释、推理和分析。

URL

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}

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])))(\/.*)?

null

null

请注意，现代浏览器中内置的默认http:.*模式将始终被强制执行，因此，即使在此模式中删除https？://，它仍将被强制执行。使用type=“text”来避免这种情况。

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属性中列出所有可能的组合（您会得到一个巨大的模式，因此在这种情况下，最好使用其他方法来测试它，而不是regex）^[5]。

null

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

• 电子邮件地址只能包含拉丁字母、数字0-9和中的字符！#$%&'*+\/=？^_``{}~。-^[6].
• 重音不是普遍支持的^[7]，但如果需要，请发表评论，我也许可以编写一个符合RFC6530标准的版本。
• 本地部分(@之前的长度只能是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自动填充似乎出于某种原因喜欢它。）

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

    

    null
    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_地址#国际化
    8. https://en.wikipedia.org/wiki/email_地址#语法→http://tools.ietf.org/html/RFC5321#Section-4.5.3.1
    9. 使用IP地址而不是域名发送电子邮件