React Hooks Form 7.0 中如何实现Textfield输入框特殊字符过滤

这里提供两种常用的实现方式，可根据业务需求选择或组合使用：

方案1：实时输入拦截过滤（用户无法输入违规特殊字符） #

该方案会在用户输入时直接清除非法字符，无感知完成过滤，适合不需要额外提示的场景。

1. 首先定义特殊字符过滤正则，可根据业务规则调整允许输入的字符范围，示例仅允许大小写字母、数字、短横线、下划线：

// 正则中^表示取反，即匹配所有不在中括号范围内的字符
const FORBIDDEN_CHAR_REG = /[^a-zA-Z0-9_\-]/g

2. 改写Controller中的onChange逻辑，对输入值做过滤后再更新到表单：

<Controller
  control={control}
  name="txnId"
  render={({ field }) => (
    <MuiTextField
      type="text"
      required
      id="txnId"
      label="Payment Ref. No."
      variant="outlined"
      InputLabelProps={{
        shrink: true,
      }}
      {...field}
      // 重写输入事件，过滤特殊字符后再提交给表单
      onChange={(e) => {
        const filteredValue = e.target.value.replace(FORBIDDEN_CHAR_REG, '')
        field.onChange(filteredValue)
      }}
    />
  )}
/>

方案2：表单校验提示（用户输入特殊字符后给出错误提示） #

该方案不会主动清除用户输入，而是在校验阶段提示输入违规，适合需要明确告知用户输入规则的场景。

直接在Controller的rules中添加校验规则即可，同时配合MUI TextField的错误提示能力展示报错信息：

const FORBIDDEN_CHAR_REG = /[^a-zA-Z0-9_\-]/g

<Controller
  control={control}
  name="txnId"
  rules={{
    required: '支付参考号不能为空',
    validate: (value) => {
      return !FORBIDDEN_CHAR_REG.test(value) || '支付参考号不能包含特殊字符'
    }
  }}
  render={({ field, fieldState: { error } }) => (
    <MuiTextField
      type="text"
      required
      id="txnId"
      label="Payment Ref. No."
      variant="outlined"
      InputLabelProps={{
        shrink: true,
      }}
      error={!!error}
      helperText={error?.message}
      {...field}
    />
  )}
/>

注意事项 #

• 两种方案可组合使用：实时过滤加校验逻辑做双重保障，避免极端场景下非法值提交
• 若项目使用Yup、Zod等校验库，可直接在表单Schema中添加正则校验规则，无需单独写validate逻辑
• 注意你代码中同时使用了useFormContext和单独初始化的useForm实例，若用FormProvider做全局表单状态管理，直接使用从useFormContext获取的control即可，避免多实例冲突

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