如何设置input的pattern属性使文本框仅接受College或High School输入

原有写法错误原因 #

你使用的方括号[]是正则中的字符组语法，仅用于匹配单个字符，[College or High School]的实际作用是匹配括号内出现的任意单个字符（如C、o、空格等），完全无法匹配完整词组。

基础HTML原生校验实现 #

直接使用正确的正则规则编写pattern属性即可，示例代码如下：

<input 
  type="text"
  pattern="^(College|High School)$"
  title="请输入 College 或 High School"
  required
>

参数说明：

• ^匹配字符串开头，$匹配字符串结尾，确保输入内容完全匹配两个指定词组之一，避免部分匹配的异常情况
• |是正则的「或」运算符，用于匹配两个备选词组
• title属性会在校验不通过时，作为浏览器原生提示的内容展示给用户
• required属性用于禁止空值提交，若允许空值可删除该属性

进阶：大小写不敏感适配 #

如果希望允许用户输入大小写变体（如college、high school、COLLEGE都可通过校验），可以在正则开头添加忽略大小写的修饰符标识：

<input 
  type="text"
  pattern="(?i)^(college|high school)$"
  title="请输入 College 或 High School"
  required
>

如果需要兼容老旧浏览器，不支持(?i)修饰符，可以用字符组实现大小写兼容：

<input 
  type="text"
  pattern="^([Cc]ollege|[Hh]igh [Ss]chool)$"
  title="请输入 College 或 High School"
  required
>

可选：实时输入校验 #

如果需要在用户输入过程中就给出错误提示，而非等到表单提交时才校验，可以搭配简单的JS逻辑实现：

<input 
  type="text"
  id="eduInput"
  pattern="(?i)^(college|high school)$"
  title="请输入 College 或 High School"
  required
>
<span id="errorTip" style="color: #f00; display: none; font-size: 14px;">输入无效，请输入 College 或 High School</span>

<script>
const input = document.getElementById('eduInput')
const tip = document.getElementById('errorTip')
input.addEventListener('input', () => {
  tip.style.display = input.validity.valid ? 'none' : 'inline'
})
</script>

内容的提问来源于stack exchange，提问作者Vem