React姓名输入框输入空格加中间名触发校验报错如何解决

问题现象 #

当前表单存在校验异常：输入字段输入空格时会直接触发校验报错。
表单必填项均配置了校验规则，以姓名校验场景为例：字段支持输入名字与中间名（无姓氏字段），仅输入纯名字内容时校验运行正常无报错；但输入空格后继续输入中间名时，就会触发校验报错，需要实现输入空格后接中间名时不触发校验报错的效果。

现有代码 #

JS 逻辑代码 #

const [nameValidationState, setNameValidationState] = useState({
  error: false,
  helperText: '',
});

const nameOnChange = (event) => {
  if (nameValidator(event.target.value)) {
    setNameValidationState({ error: false, helperText: '' });
    setPaymentInfo({
      ...paymentInfo,
      firstName: event.target.value,
    });
  } else {
    setNameValidationState({ error: true, helperText: 'Please enter your name.' });
    setPaymentInfo({
      ...paymentInfo,
      firstName: null,
    });
  }

const handleFirstNameChange = (event) => {
  nameOnChange(event);
  handleInputChange(event);
};

校验规则代码 #

export const nameValidator = (name) => {
  const nameRegex = /^[a-zA-ZwığüşöçĞÜŞÖÇİ]+$/;

  return nameRegex.test(name);
};

组件代码 #

<AS.TextField
  placeholder=""
  onChange={handleFirstNameChange}
  error={nameValidationState.error}
  helperText={nameValidationState.helperText}
  name="firstName"
  value={paymentInfo.firstName}
/>

问题根因 #

1. 现有姓名校验正则未配置空格匹配规则，只要输入内容包含空格，正则就会返回false直接触发报错，无法兼容「名字+空格+中间名」的合法输入格式。
2. 输入事件绑定的是实时校验，用户输入空格后、还没输入后续中间名的输入间隙，末尾的空格会直接被判定为非法输入，打断正常输入流程。

修复方案 #

1. 调整校验正则 #

修改正则规则，允许名字和中间名之间存在单个分隔空格，同时禁止首尾空格、连续多个空格的非法输入：

export const nameValidator = (name) => {
  // 规则：匹配合法姓名字符，支持字符间单个空格分隔名字、中间名，不允许首尾空格、连续空格
  const nameRegex = /^[a-zA-ZwığüşöçĞÜŞÖÇİ]+(?: [a-zA-ZwığüşöçĞÜŞÖÇİ]+)*$/;
  return nameRegex.test(name);
};

2. 优化实时校验逻辑 #

增加输入中状态判断，用户输入空格后尚未输入后续中间名的临时状态下，不触发校验报错，避免打断输入流程：

const nameOnChange = (event) => {
  const inputValue = event.target.value;
  // 判断是否处于「已输入合法名字、刚敲完空格准备输入中间名」的输入中状态
  const isTypingMiddleName = inputValue.endsWith(' ') && nameValidator(inputValue.trim());

  if (nameValidator(inputValue) || isTypingMiddleName) {
    setNameValidationState({ error: false, helperText: '' });
    setPaymentInfo({
      ...paymentInfo,
      // 最终存储值自动过滤首尾多余空格，避免存入无效空格内容
      firstName: inputValue.trim(),
    });
  } else {
    setNameValidationState({ error: true, helperText: 'Please enter your name.' });
    setPaymentInfo({
      ...paymentInfo,
      firstName: null,
    });
  }
};

补充说明：如果不需要保留用户输入过程中的空格临时状态，也可以直接在onChange触发时先对输入值做trim()处理再校验赋值，不过这种方式会导致用户无法正常输入中间的分隔空格，输入体验较差，不推荐使用。

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