如何使用 yup 不允许在 React hook 中使用特殊字符和空格

Question

这是代码：

{
      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'),
    },

我想做的是限制输入，不允许任何特殊字符和空格。还有如何在输入 yup 时验证输入？

我尝试这样做：

!/^[a-zA-Z0-9]+$/

但我收到一个错误，这就是这个

“boolean”类型的参数不可分配给“RegExp”类型的参数。

Answer 1

您可以使用 Formik 和 Yup 根据规则验证和禁用提交按钮，但它不会帮助您限制输入，您需要在 onKeyUp / onKeyPress 中处理。沙箱链接到使用 Formik 和 Yup 验证电子邮件字段并使用 onKeyPress 限制姓名字段仅 a-z 和 A-Z 的示例

https://codesandbox.io/s/vigilant-pike-lr5p2e?file=/src/App.js