我有一个文本输入框:
<input type="text" name="email" size="25" placeholder="Email Address" required/>
有没有办法将输入字段格式化为只允许某些文本有效?
例如:在那个特定的文本字段中,用户必须输入以 @hotmail.co.uk
结尾的电子邮件地址。 @yahoo.com
等任何其他电子邮件域都将无效,因此在单击提交时会显示错误(不会注册用户)。
最佳答案
您可以使用 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>
关于javascript - 如何验证输入类型 ="text"元素只接受特定内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34466853/