使用 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);