具有"pattern"属性的HTML表单验证

Question

我正试图为HTML表单想出一个有效的模式。我想允许*@student.*.edu.vn

这是我的代码：

<input 
type="text" 
name="mail"  
pattern="([a-z]|[0-9])+(@{1})+(student)+(.)+[a-z]+(.edu.vn)"
/>

它不能像我希望的那样工作。我做错了什么？

Answer 1

模式(正则表达式(有点错误，因为您没有转义所有特殊字符(如.(，并且其中包含一些不必要的部分。请尝试使用以下稍微修改过的模式：

([a-z]|[0-9])+@student.[a-z]+.edu.vn

<form>
<input type="text" name="mail" pattern="([a-z]|[0-9])+@student.[a-z]+.edu.vn" />
<input type="submit">
</form>

注意：确保您也在服务器端进行验证，因为任何在表单中输入值的人都可以删除pattern以绕过此检查。

Answer 2

我提出了这个解决方案，它更容易阅读，也不那么严格(这是一件好事，因为电子邮件地址可以包含比小写字母数字多得多的字符。不要忘记使用电子邮件验证器在后端进行正确的验证。

<form>
<input 
type="text" 
name="mail"  
pattern=".+@student..+.edu.vn"
/>
<input type="submit">
</form>