HTML5 表单验证模式答案

【问题标题】：HTML5 Form Validation PatternHTML5 表单验证模式
【发布时间】：2016-07-04 00:28:08
【问题描述】：

我正在使用 HTML5 模式进行表单验证。我希望我的输入字段只允许以下字符的任意组合。

, @ – - . ; / ' : ( ) # a-z A-Z 0-9 space

我一直在尝试创建模式来实现这一点。我想我想出了一个使用 regexr.com 的解决方案。在那个网站上，我的模式效果很好，但是在我的表单中实现时，所有内容都显示为无效条目。例如“Test”无效“Test D'luxe”无效、“Company Test #1”无效等。

My Results on RegExr

这是我想出的模式：

pattern="[a-zA-Z[\d\[\-\.\_,\(\)\#\:\;\'\/]"

我查看了其他一些堆栈溢出帖子，例如

但我一直无法拼凑出我做错了什么。我将不胜感激任何帮助。我对此很陌生，所以我愿意接受任何和所有的反馈。

【问题讨论】：

标签： regex html validation

【解决方案1】：

您应该通过在末尾添加* 量词来允许0+ 个字符，将' 替换为\x27 并去掉多余的转义：

pattern="[-,@–.;/\x27:()#a-zA-Z0-9 ]*"

input:valid {
  color: green;
}
input:invalid {
  color: red;
}

<form name="form1"> 
 <input value="-,@–.;/':()#azAZ09 " pattern="[-,@–.;/\x27:()#a-zA-Z0-9 ]*" title="Please enter allowed characters only."/>
 <input type="Submit"/> 
</form>

【讨论】：

完美！非常感谢。