如何用HTML创建支持手机号/邮箱输入的input字段

纯HTML原生能力就能实现基础可用的效果，搭配极少量JS可以进一步优化输入体验，不需要依赖第三方框架或库。

基础原生实现（无JS） #

核心思路是不要单独使用type="tel"或type="email"——这两个输入类型会强制校验单种格式，无法兼容两种输入场景。改用type="text"搭配pattern属性自定义正则校验规则即可，示例代码：

<label for="contact">请输入手机号/邮箱：</label>
<input
  id="contact"
  name="contact"
  type="text"
  required
  pattern="^(1[3-9]\d{9}|[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})$"
  title="请输入11位有效手机号，或格式正确的邮箱地址"
>

相关属性说明：

• pattern属性内置的正则用|分隔两套校验规则：前半段匹配国内11位规范手机号（1开头、第二位为3-9的11位数字），后半段匹配标准格式邮箱地址
• 表单提交时浏览器会自动按照pattern规则校验输入内容，不符合规则时会自动拦截提交，并弹出title属性里配置的提示文案
• required属性会自动校验输入非空，不需要额外写判断逻辑

体验增强实现（少量JS） #

原生方案在移动端的键盘唤起逻辑不够智能，可以加几行简单的JS，根据用户实时输入的内容动态切换键盘类型，大幅提升移动端输入效率：

const contactInput = document.getElementById('contact');
contactInput.addEventListener('input', () => {
  const currentVal = contactInput.value.trim();
  if (/^\d/.test(currentVal)) {
    // 输入以数字开头，判定为手机号输入场景，唤起数字键盘
    contactInput.inputMode = 'tel';
  } else if (currentVal.includes('@')) {
    // 输入包含@符号，判定为邮箱输入场景，唤起带@快捷入口的邮箱键盘
    contactInput.inputMode = 'email';
  } else {
    // 空值或其他场景默认使用普通文本键盘
    contactInput.inputMode = 'text';
  }
});

注意事项 #

所有前端侧的HTML/JS校验都只能做体验层面的拦截，数据提交到服务端后必须再次做手机号、邮箱的格式合法性校验，避免前端校验被恶意绕过，产生脏数据。

内容的提问来源于stack exchange，提问作者Manohisoa Rajaonarivony