如何将名称字段限制为HTML中的几个名称？

Question

First Name:<br> 
<input type="text" name="firstname" value="First Name" pattern="[Catherine]"> 
<br> 

我想上面的代码只允许凯瑟琳进入该领域，但不知道我哪里出错。

Answer 1

1. 你的模式应该是

   pattern="Catherine" 
   

   没有方括号，这在正则表达式的特殊含义。

   如果你想允许多个名称，使用正则表达式：

   pattern="(Catherine|Katie|Kate)" 
   

2. 这是一个验证，仅适用于提交表单。它不禁止输入其他名字。如果模式不匹配，浏览器将不会提交表单，而是在输入旁边显示错误弹出窗口。

实施例只允许凯瑟琳：

<form> 
 
<input type="text" pattern="Catherine" required /> 
 
<input type="submit" value="submit"> 
 
</form>

实施例具有多个名称允许：

<form> 
 
<input type="text" pattern="(Catherine|Katie|Kate)" required /> 
 
<input type="submit" value="submit"> 
 
</form>

如果您确实只想输入特定字，请考虑将JS与onInput事件处理程序一起使用。然而，这看起来不像你真正想要的。

---

编辑：我还添加了required关键字防止他人提交一个空的输入。