在处理输入字段时,根据特定规则验证用户输入是一件常见的事情。在不使用外部验证库的情况下,我们可以使用一些内置的 HTML5 input
类型来严格控制值。
具体来说,以下 input
类型强制用户输入有效字符:
input 类型 | 描述 |
---|---|
type="color" | 只接受颜色 |
type="date" | 只接受日期 |
type="email" | 只接受有效的电子邮件地址 |
type="number" | 只接受数字 |
type="tel" | 只接受电话号码 |
type="url" | 只接受 URL |
尽管这些 input
类型很有用,但它们不能满足输入必须匹配给定正则表达式的情况。
例如,我们如何在使用 type="tel"
属性时强制用户输入电话号码的 10 位数字。这就是 pattern
属性的用武之地。
下面的示例代码解决了前面提到的问题:
<input type="tel" pattern="^\d{10}$" title="请输入10位数字" />
建议使用 title
属性,以便用户知道正确的值是什么。