HTML5 input 类型 tel
<input> "tel" 类型的元素用于让用户输入和编辑电话号码。
实例
<!DOCTYPE html><html><body><form action="/example/html/action_page.aspx">电话号码:<input type="tel" name="usrtel"><input type="submit"></form><p><b>注释：</b>Safari 8 及更新版本支持 type="tel"。</p></body></html>
浏览器支持
表格中的数字注明了完全支持该选择器的首个浏览器版本。
| 类型 | |||||
|---|---|---|---|---|---|
| tel | No | No | No | 8 | No |
定义与用法
<input type="tel"> 用于应该包含电话号码的输入字段。
尽管 tel 类型的输入在功能上和 text 输入一致, 但它们确实有用; 其中最明显的就是移动浏览器— 特别是在手机上 — 可能会选择提供为输入电话号码而优化的自定义键盘。使用电话号码的特定输入类型也使添加自定义验证和处理电话号码更方便。
目前只有 Safari 8 支持 tel 类型。
验证
正如我们之前谈到的那样，为电话号码提供一种通用的客户端验证解决方案是相当困难的。所以，我们能做些什么？让我们考虑一些选项。
- 非空验证
- 正则验证
- js验证
重要提示: HTML表单验证不能替代服务器端脚本，以确保输入的数据在被允许进入数据库之前是正确的格式。对于有些人来说，调整html是非常容易的，这样他们就可以绕过验证，或者完全删除它。也有人可能完全绕过你的html，直接提交数据到你的服务器。如果您的服务器端代码无法验证接收到的数据，那么当格式不正确的数据（或数据太大，类型错误等等）输入到数据库时，可能会导致灾难。