使用 React Formik 对特定值进行正则表达式验证

Question

首先，我想验证该字段，如果用户键入此字段中不存在的字符（例如）： /[ùûüÿ€'“”«»–àâæçéèêëïîôœ]/触发错误消息。

其次，我想将 3 个变量与正则表达式验证连接起来。

这是代码：

const validChars1 = /[A-Za-z0-9`~!@#$%^&*()+={};:’”,./<>?| \\\\\ [\]]*$/;
const validChars2 = /[ùûüÿ€’“”«»–àâæçéèêëïîôœ]/;
const validChars3 = /[áéíóúüñ¿]/;
const mainValidator = validChars1 + validChars2 + validChars3;
const validationSchema = yup.object({
    primaryInformation: yup.object({
      externalEmployeeId: yup
        .string()
        .matches(mainValidator, "Please enter valid name")
        .required(intl.get("userManagement.editor.requiredFieldError"))

//Error: Operator '+' cannot be applied to types 'RegExp' and 'RegExp'

请帮我解决这个问题，谢谢！

Answer 1

虽然你不能像这样用普通的 JavaScript 编写正则表达式，你可以这样做

const validChars1 = /[A-Za-z0-9`~!@#$%^&*()+={};:’”,./<>?| \\\\\ [\]]*$/;
const validChars2 = /[ùûüÿ€’“”«»–àâæçéèêëïîôœ]/;
const validChars3 = /[áéíóúüñ¿]/;
const mainValidator = new RegExp(
  validChars1.source 
  + validChars2.source 
  + validChars3.source
);
// etc...

不过，您的正则表达式还有另一个问题：第一个以与输入末尾匹配的$断言结尾。 /a$b/形式的 RegExp 永远不会成功，因为$b是矛盾的。 "a"和"ab"都不能满足它。 对于"a" ， $会成功，但b会失败，反之对于"ab" 。

如果您想在不诉诸源字符串操作的情况下编写 RegExp，您可以查看compose-regexp ，它可以让您编写如下代码：

import {sequence} from 'compose-regexp'

const validChars1 = /[A-Za-z0-9`~!@#$%^&*()+={};:’”,./<>?| \\\\\ [\]]*/;
const validChars2 = /[ùûüÿ€’“”«»–àâæçéèêëïîôœ]/;
const validChars3 = /[áéíóúüñ¿]/;
const mainValidator = sequence(validChars1, validChars2, validChars3);