如何使用HTML5输入验证来验证表单输入
我试图找到一个模式的完整列表，用于验证各种类型的HTML5表单验证输入，特别是url ， email ， tel等，但我找不到任何。 目前，这些输入验证的内置版本远非完美（并且tel甚至不检查您输入的内容是否是电话号码）。 所以我想知道，我可以使用哪种模式来验证用户是否在输入中输入正确的格式？
以下是默认验证允许不允许输入的情况的几个示例：
type="email"
该字段允许在@之后具有不正确域的电子邮件，并且允许地址以短划线或句点开始或结束，这也是不允许的。 因此， .example-@x是允许的。
type="url"
该输入基本上允许以http:// （Chrome）开头的任何输入，并且除了几个特殊字符（例如那些在URL（，@，＃，〜等）中具有函数的字符）之外的任何其他输入。 在FF中，所有检查的内容都是以http:开头的，后面是除以下之外的任何内容:甚至在FF中只允许http: ：）。 IE和FF一样，只是它不允许http:: 。
例如： http://. 在三个方面都是允许的。 http://,
type="tel"
目前在任何主流浏览器中都没有内置的电话号码验证（除了告诉移动浏览器显示哪种键盘外，其功能与type="text"完全相同。
因此，由于浏览器在每种情况下都没有表现出一致的行为，并且由于它们显示的行为非常基本，并且存在许多误报，我该怎么做来验证我的HTML表单（仍然使用HTML5输入验证）？
PS：我发布这个是因为我会发现自己有一个完整的表单验证模式列表是有用的，所以我认为它可能对其他人也有用（当然其他人也可以发布他们的解决方案）。
这些模式并不一定是简单的，但我认为在任何情况下都是最好的。 请记住，（最近）国际化域名（ IDN ）也可以使用。 因此，在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}
网址，无需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])))(/.*)?
说明：
-开头或结尾- .international ”），这很可能不会很快改变。 0.0.0.0 ， 127.0.0.1等不检查 01.1.1.1 ）[4]。 请注意，现代浏览器中内置的默认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]。
!"#$%&'()*+, ./ :;<=>?@ []^_`` {|}~除了作为域分隔符的句点之外。 [!-,] [./] [:-@] [[-``] [{-~]范围内匹配。 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表单。
!#$%&'*+/=?^_``{|}~.- [6]中的字符。 @之前只能有63个字符长，总地址只能有254个字符长[8]。 -或-开始或结束. ，并且没有两个点可能连续出现[8]。 电话号码
((+|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自动填充似乎很喜欢它。） 这个正则表达式只适用于10位数的电话号码。 由于每个国家/地区的电话号码长度可能有所不同，因此最好使用此模式的不太严格的版本，或将其修改为适用于所需的国家/地区。 所以，这个模式通常应该被用作一种模板模式。
额外：西式名字
([A-ZΆ-ΫÀ-ÖØ-Þ][A-ZΆ-ΫÀ-ÖØ-Þa-zά-ώß-öø-ÿ]{1,19} ?){1,10}
是的，我知道，我非常以西方为中心，但这也可能是有用的，因为也可能很难做到这一点，并且如果您也为西方人建立网站，这将始终有效（亚洲名称也具有这种格式的表示）。
ÐÞ ðþ ）： AZ匹配所有大写拉丁字母： ABCDEFGHIJKLMNOPQRSTUVWXYZ Ά-Ϋ匹配所有大写希腊字母，包括带重音符号的字母： Ά·ΈΉΊΌΎΏΐ ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩ ΪΫ À-ÖØ-Þ匹配所有大写的重音拉丁字母，以及Ð和Þ： ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØÙÚÛÜÝÞ 。 在这之间还有字符× （在Ö和Ø之间），这是遗漏的。 az匹配所有小写拉丁字母： abcdefghijklmnopqrstuvwxyz ά-ώ匹配所有的小写希腊字母，包括重音的： άέήίΰαβγδεζηθικλμνξοπρςστυφχψωϊϋόύώ ß-öø-ÿ匹配所有小写字母的拉丁字母，以及ß，ð和þ： ßàáâãäåæçèéêëìíîïðñòóôõöøùúûüýþÿ 。 在两者之间还有字符÷ （在ö和ø之间），这是遗漏的。 参考
上一篇: How to verify form input using HTML5 input verification