了解 HTML5 表单属性（第 2 部分）

suchonababu941

以下是我们的书HTML5 & CSS3 for the Real World, 2nd Edition的摘录，该书由 Alexis Goldstein、Louis Lazaris 和 Estelle Weyl 撰写。副本在世界各地的商店出售，或者您可以在此处购买电子书形式。  属性pattern_ 该pattern属性使您能够提供用户输入必须匹配的正则表达式才能被视为有效。对于用户可以输入自由格式文本的任何输入，您可以限制该属性可接受的语法pattern。 模式中使用的正则表达式语言与 JavaScript 相同基于 Perl 的正则表达式语法，只不过模式属性必须匹配整个值，而不仅仅是子集。当包含模式时，您应该始终向用户指示预期（和必需）的模式是什么。 全局title属性与属性结合使用时具有特殊意义pattern。


由于浏览器当前在title悬停时显示属性的值（例如工具提示），因此请包含比占位符文本更详细的模式指令，并形成连贯的语句。在支持带有错误消息的本机表单验证的浏览器中，该title属性还将与浏览器的默认错误 伯利兹 WhatsApp 号码列表 消息一起显示，我们将在本章后面介绍。 注意：正则表达式 Learn to Code with JavaScript 正则表达式是大多数编程语言的一项功能，它允许开发人员指定字符模式并检查给定字符串是否与该模式匹配。众所周知，正则表达式对于外行来说是难以理解的。例如，用于检查字符串是否格式化为十六进制颜色值的一种可能的正则表达式是：#[A-Fa-f0-9]{6}。 关于正则表达式语法的完整教程超出了本书的范围，但是如果您想学习，网上有大量很棒的资源、教程和备忘单。



或者，您可以在网络上搜索或在论坛上询问适合您目的的模式。 作为一个基本示例，让我们pattern向表单中的密码字段添加一个属性。我们希望强制要求密码长度至少为六个字符且不含空格例如，如果您想规定最大字符数，则 6 到 10 个字符的语法将为。 与required属性一样，pattern如果模式不匹配，属性将阻止提交表单，并提供错误消息。 如果您的模式不是有效的正则表达式，则出于验证目的，它将被忽略。 pattern自 Firefox 4、Safari 5、Chrome 10、Opera 11、IE10 和 Android 2.3 以来，所有浏览器都在一定程度上支持该属性。我们所说的“某种程度上”是指，虽然现在所有浏览器都支持该pattern属性，但某些浏览器（尤其是 Safari 和 Android 到 4.4 版本）允许在表单提交时发送无效数据。