React Hook中用Yup实现输入禁特殊字符与空格、实时验证及类型报错解决

报错根因 #

你遇到的类型为'boolean'的参数不能赋值给类型为'RegExp'报错，本质是传参逻辑错误：
Yup的.matches()方法第一个入参要求必须传入RegExp类型的正则表达式，你尝试写的!/^[a-zA-Z0-9]+$/在JS执行时，会先把正则字面量转成布尔值再执行取反操作，最终传入方法的是布尔类型值，自然触发类型校验失败。

满足需求的正确配置 #

你原本写的/^[a-zA-Z0-9]+$/正则本身已经完全覆盖需求：

• 正则从字符串开头匹配到结尾，仅允许大小写英文字母、数字组成内容
• 只要输入中包含空格、各类特殊符号，就会直接触发匹配失败，弹出你配置的错误提示
  完全不需要在正则前加取反运算符，修正后的完整字段配置如下：

{
  label: "Name",
  name: "name",
  placeholder: 'Name',
  type: "text",
  rule: yup.string()
    .required('Name is a required field')
    .matches(/^[a-zA-Z0-9]+$/, '* This field cannot contain white space and special character')
}

常见写法避坑 #

后续调整校验规则时，需要注意正则取反的正确位置，避免重复踩类型报错的坑：

• 禁止把取反运算符!加在正则字面量前面，这会直接把RegExp实例转成boolean值，永远触发类型错误
• 如果需要在正则规则中表达“排除某类内容”的语义，要把取反符^放在字符集[]内部，例如编写“排除所有字母、数字、空白符”的规则时，正确写法是/^[^a-zA-Z0-9\s]*$/，整个传参依然是合法的RegExp类型

实时校验适配 #

要实现输入过程中的实时校验，只需要在React Hook Form初始化时把校验模式设为onChange，配合Yup解析器加载上述rule配置，输入时就会自动触发校验逻辑，不需要额外封装输入监听事件。

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