[英]How to validate an input type="text" element to only accept certain content?
I have a text input field:我有一个文本输入字段:
<input type="text" name="email" size="25" placeholder="Email Address" required/>
Is there a way to format the input field to only allow certain text to be valid?有没有办法格式化输入字段以仅允许某些文本有效?
For example: In that particular text field, the user must input an email address which ends in @hotmail.co.uk
.例如:在该特定文本字段中,用户必须输入以
@hotmail.co.uk
结尾的 email 地址。 Any other email domains such as @yahoo.com
will not be valid and therefore will show an error when clicking submit (Will not register the user).任何其他 email 域,例如
@yahoo.com
将无效,因此在单击提交时将显示错误(不会注册用户)。
You can use the HTML5 pattern
attribute to validate whether the string ends with @hotmail.co.uk
. 您可以使用HTML5
pattern
属性来验证字符串是否以@hotmail.co.uk
结尾。
In this case you can use the following regular expression: 在这种情况下,您可以使用以下正则表达式:
^.*@hotmail\.co\.uk$
<form> <input type="text" name="email" pattern="^.*@hotmail\\.co\\.uk$" size="25" placeholder="Email Address" required/> <input type="submit" /> </form>
Alternatively, you could also just attach an input
event listener to the element and check manually. 另外,您也可以将
input
事件侦听器附加到元素上并手动检查。 This is just a basic example, feel free to customize to your needs. 这只是一个基本示例,您可以根据自己的需要进行自定义。 I would still suggest validating that the value is a valid email address by using the regex from 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>
Extended answer using the "pattern" attribute (from Josh Crozier): 使用“模式”属性的扩展答案(来自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/>
many solutions are available: 有许多解决方案可用:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.