我有一个文本输入字段：
<input type="text" name="email" size="25" placeholder="Email Address" required/>
有没有一种方法可以格式化输入字段，只允许某些文本有效？
例如：在该特定文本字段中，用户必须输入以@hotmail.co.uk结尾的电子邮件地址。任何其他电子邮件域（如@yahoo.com）都将无效，因此在单击提交时将显示错误（不会注册用户）。
您可以使用HTML5 pattern属性来验证字符串是否以@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事件侦听器附加到元素并手动检查。这只是一个基本的例子，可以根据您的需要进行自定义。我仍然建议使用这个问题中的regex来验证该值是否是有效的电子邮件地址。
$('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>提供了许多解决方案：
使用"pattern"属性的扩展答案（来自Josh Crozier）：
用户更改输入值后，您可以检查其是否为有效输入：
此外，您可以在用户键入值时测试输入并突出显示边界：
function check(el) {
if (new RegExp(el.pattern).test(el.value) == false) {
alert("Bad Input")
}
}
function test(el) {
if (new RegExp(el.pattern).test(el.value) == false) {
el.classList.add("bad")
} else {
el.classList.remove("bad")
}
}.bad {
border-color: red;
}<input pattern="^.*@hotmail'.co'.uk$" onchange="check(this)" oninput="test(this)" type="text" name="email" size="25" placeholder="Email Address" required/>