空字符串或自定義正則表達式 Yup 驗證

Question

我正在嘗試使用 Yup 驗證字段以允許空字符串或自定義正則表達式。 例如，這個正則表達式^[/.-_ A-Za-z0-9]+$應該能夠匹配以下輸入：

• 什么都不輸入// fails
• /test/page_one // works
• /a/test/with-a-dash // fails
• /a/test/with_underscores // works
• /a/test/with_123_numbers // works

這篇文章建議在正則表達式前加上^$| ，這將使我的正則表達式^$|^[/.-_ A-Za-z0-9]+$ ，但是在正則表達式測試器上對其進行測試會在輸入空白字符串時返回無窮大錯誤（也就是什么都沒有）。 另外，我的正則表達式不允許輸入破折號。

為什么會發生這種情況，如何解決？ 我正在使用 Yup 的.notRequired() ，我認為它允許空字符串。

編碼：

import React from "react";
import { useForm } from "react-hook-form";
import * as Yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";

// const slugRegex: RegExp = new RegExp('^[/.-_ A-Za-z0-9]+$');
const slugRegex = new RegExp("^[/.-_ A-Za-z0-9]+$");

const Form = () => {
  const schema = Yup.object().shape({
    name: Yup.string()
      .required("Required")
      .min(3, "Enter at least 3 characters"),
    slug: Yup.string()
      .trim()
      .max(60, "Enter a maximum of 60 characters")
      .matches(slugRegex, "Invalid slug")
      .notRequired()
  });
  const { register, handleSubmit, formState: {errors} } = useForm({
    resolver: yupResolver(schema),
    mode: "onTouched"
  });

  const onSubmit = async (data, e) => {
    console.log("data", data, "e", e);
  };

  return (
    <>
      <h2>Form</h2>
      <form onSubmit={handleSubmit(onSubmit /*, onError*/)}>
        <input
          {...register("name", { required: true })}
          name="name"
          placeholder="Name"
        />
        {errors.name && <p>{errors.name.message}</p>}
        <br/>
        <input
          {...register("slug")}
          name="slug"
          placeholder="e.g. /nginx/guide"
        />
        {errors.slug && <p>{errors.slug.message}</p>}
        <br/>
        <button type="submit" onClick={onSubmit}>
          Submit
        </button>
      </form>
    </>
  );
};

export default Form;

代碼沙盒演示： https://codesandbox.io/s/react-playground-forked-ll9tm

謝謝你。

Answer 1

因為“-”在集合 [] 中具有特殊含義，所以您必須對其進行轉義（或按照評論建議將其放在末尾）

您還可以使用非捕獲組來使您的正則表達式更具可讀性並確保您的邏輯或“|” 適用於所有字符串

這里是一個固定版本（還要注意“/”被轉義以防止錯誤）

(?:^$)|(?:^[\/.\-_ A-Za-z0-9]+$)

工作演示： https://regex101.com/r/j4gJTx/1