HTML输入只接受数字和电子邮件

Question

如何设置html输入以仅接受数字和电子邮件ID？

<input id="input" type="text" />

Answer 1

<input id="input" type="number" />
<input id="input" type="email" />

在w3schools上查看此信息

...我看到你想要相同的输入，所以你会坚持使用文本，然后使用正则表达式检查输入

\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}\b.

然后你需要验证你的号码的正则表达式

Answer 2

您可以将输入设置为type="email"并type="tel" 。

Answer 3

您可以针对电话号码和电子邮件运行简单的正则表达式。 这很可能不会解决所有问题，但它会给你一个起点。

伪代码：

//if input is phone
  // do something
// else if input is email
  // do something else
// else (when it is neither)
  // throw an error

或者你甚至可以缩短它

// if input is phone or input is email 
  // do something
//else
  //trow error

您可以在regex101.com的库中找到大量的正则表达式解决方案。 有一大堆电子邮件和电话号码验证器。

一个应该检查两者（我没有深入研究正则表达式）的是： \\(^\\+[0-9]{9,15}$)|(^.+@.+\\..+$)\\i

如果输入字符串是电话或电子邮件，则应该为true。 但是，正如我上面所说，它很可能需要改进。

Answer 4

如上面评论中所述，如果您想接受8位数的电话号码和电子邮件地址，这应该有效：

HTML表单代码：

<form onsubmit="return validateInput()">
  <input type="text" name"mail_or_phone"/>
</form>

JS验证：

function validateInput()
{
  var fieldValue= document.getElementById("mail_or_phone").value;

  // taken from this SO post: http://stackoverflow.com/questions/7126345/regular-expression-to-require-10-digits-without-considering-spaces      
  var phoneValidation= /^([\s\(\)\-]*\d[\s\(\)\-]*){8}$/; 
  var mailValidation= /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

  if (fieldValue.match(phoneValidation)) {
    // correct phone structure
    return true;
  } else if (fieldValue.match(mailValidation)) {
    // correct mail format
    return true;
  } else {
    // incorrect structure
    return false;
  }
}

这是一个显示上述代码示例的小提琴 。 如果答案不正确，您应该显示某种警告（不包含在代码中）。