求符合空格、连字符等规则的React JS正则表达式

需求明确（中文翻译）： #

允许使用字母、空格、连字符（-）、句号（.）、撇号（'），且需满足以下规则：

• 空格：只能夹在字母中间，不能连续出现
• 连字符：只能夹在字母中间（比如"boyd-lawson"或"boyd - lawson"合法，但"boyd-"、"-boyd"、末尾带空格的"boyd "都不行），不能连续出现
• 句号：不能作为第一个字符，不能连续出现
• 撇号：不能连续出现

你原正则的问题： #

你写的/^(?!.*(?:\s\s|-{2,}|\.{2,}|'{2,}))(?=[A-Za-z\s.\-']+$)(?!.*(?:^\.))/g有几个缺陷：

1. 没有限制字符串的首尾必须是字母，导致像"boyd-"这种末尾带连字符的内容会被误判合法
2. (?!.*(?:^\.))写法冗余，直接用^(?!\.)更简洁
3. 缺少对整个字符串的完整匹配逻辑，仅靠断言无法确保内容完全符合规则

修正后的正则表达式 #

const validRegex = /^(?!\.)(?!.*(?:\s{2,}|-{2,}|\.{2,}|'{2,}))[A-Za-z]+(?:[\s.'-][A-Za-z]+)*$/;

正则拆解： #

• ^(?!\.)：直接限制开头不能是句号
• (?!.*(?:\s{2,}|-{2,}|\.{2,}|'{2,}))：提前排查整个字符串，禁止出现连续的空格、连字符、句号或撇号
• [A-Za-z]+：强制字符串必须以字母开头
• (?:[\s.'-][A-Za-z]+)*：允许后续重复「特殊字符+字母」的组合，确保所有特殊字符都被字母包裹，不会出现在末尾

React中使用示例 #

import { useState } from 'react';

function InputValidator() {
  const [inputVal, setInputVal] = useState('');
  const regex = /^(?!\.)(?!.*(?:\s{2,}|-{2,}|\.{2,}|'{2,}))[A-Za-z]+(?:[\s.'-][A-Za-z]+)*$/;

  const validate = () => {
    alert(regex.test(inputVal) ? '输入合法' : '输入不合法');
  };

  return (
    <div>
      <input
        value={inputVal}
        onChange={(e) => setInputVal(e.target.value)}
        placeholder="输入内容测试"
      />
      <button onClick={validate}>验证</button>
    </div>
  );
}

export default InputValidator;

测试验证： #

✅ 合法示例：boyd-lawson、boyd - lawson、O'Neil、Mary Ann.Smith、John-Doe'Jr
❌ 非法示例：boyd-、-boyd、boyd lawson（连续空格）、.smith（开头是句号）、O''Neil（连续撇号）、John--Doe（连续连字符）

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