javascript - 如何验证输入类型 ="text"元素只接受特定内容？

Question

我有一个文本输入框:

<input type="text" name="email" size="25" placeholder="Email Address" required/>

有没有办法将输入字段格式化为只允许某些文本有效？

例如:在那个特定的文本字段中，用户必须输入以 @hotmail.co.uk 结尾的电子邮件地址。 @yahoo.com 等任何其他电子邮件域都将无效，因此在单击提交时会显示错误(不会注册用户)。

Answer 1

您可以使用 HTML5 pattern attribute验证字符串是否以 @hotmail.co.uk 结尾。

在这种情况下，您可以使用以下正则表达式:

^.*@hotmail\.co\.uk$

<form>
  <input type="text" name="email" pattern="^.*@hotmail\.co\.uk$" size="25" placeholder="Email Address" required/>
  <input type="submit" />
</form>

或者，您也可以将 input 事件监听器附加到元素并手动检查。这只是一个基本示例，您可以根据自己的需要随意定制。我仍然建议使用 this question 中的正则表达式来验证该值是否为有效的电子邮件地址。 .

$('input[name="email"]').on('input', function(e) {
  var isValid = this.value.match(/^.*@hotmail\.co\.uk$/) !== null;
  $(this).toggleClass('isValid', isValid);
});

.isValid {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" name="email" size="25" placeholder="Email Address" required/>
  <input type="submit" />
</form>