h5 php表单验证,pattern--HTML5的表单验证属性

在本教程中我们将探索 HTML 的pattern属性，用来帮助我们制定自定义表单验证的方式。

验证

表单验证对一个网站的安全性，以及可用性至关重要。验证过程就是在表单提交之前判断输入值是否匹配了正确的格式。例如，如果我们要在一个输入框内输入电子邮件地址，该值一定要是一个有效的电子邮件地址；应该以一个字母或数字开头，然后是@符号，最后以一个域名结束。

HTML5规范对于一些新的input类型，如email、url、tel,也做出了一些更为简易的验证，并且也被打包成了预定义的验证。当给定的值不符合预期的格式时，这些输入类型就会抛出一条错误的消息从而阻止提交。

然而期待每个可能的输入方案都被迎合是不切实际的。假如你有一个用户名、 邮编或任何未被指定为标准输入类型的数据类型，我们将如何验证这些输入?这时候pattern属性就要发挥作用了。

pattern属性的使用

pattern属性仅适用于input元素。它允许我们利用正则表达式 (RegEx)制定自己的验证规范验证输入值。同样的，如果输入值与指定的模式不匹配，将会抛出错误信息。

比如说，在我们的表格中有一个用户名输入框。然而并不存在用户名的标准类型，因此我们使用普通的text输入类型:

让我们使用pattern属性来定义规则。在这种情况下，我们将指定用户名应该只包含小写字母;没有大写字母、 数字或其他特殊字符。此外，用户名长度不应该超过 15 个字符。利用正则表达式，这条规则可以表示为[a-z]{1,15}.

在我们的用户名输入框中添加[a-z]{1,15}作为pattern属性的值:

现在，因为它只接受小写字母，所以提交任何其他值将会抛出一条错误信息:

正如你从上图看到的，错误消息说，"请匹配被要求的格式"。所以虽然我们的验证工作起作用了，但此消息并不能帮助我们的用户了解