Question

我有一个文本输入字段：

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

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

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

Answer 1

You can use the 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>

Answer 2

Extended answer using the "pattern" attribute (from Josh Crozier):

After the user changed the value of the input you can check it for a valid input:

In addition you could test the input while the user is typing the value and highlight the border:

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/>

Answer 3

有许多解决方案可供选择：

使用javascript验证表单。

使用2个输入：用户名的文本输入和＆＃34; @ site.com＆＃34;

的选择选项或单选按钮输入

上的

模式属性

如何验证input type =“text”元素只接受某些内容？

3 个答案: