标签: yup

我们可以在我下面提到的 formik YupValidationSchema 中添加自定义验证吗？

YupValidationSchema = () => {
        return Yup.object({
             Email: Yup.string()
            .max(256, "Length exceed 256 chars")
            .matches(EMAIL_REGEXP, "Enter a valid email address")
            .required("Email is required")
})
}

我需要为电子邮件字段添加一项验证，就像它应该接受某些域一样

let domainVal = companyName.some((val) => email.includes(val));
     if(!domainVal) error('Invalid')
     else  success('Valid');

有人可以帮助我如何在 yupvalidationschema 中添加此域验证代码吗？

下面是我尝试从下拉列表中选择值的代码。 handleChange不起作用，当我从下拉列表中选择值时，它不会使用下拉列表中选定的值进行更新。它正在消失（空白）。

当我选择它时，下拉值会被填充，它不会捕获新的选定值。

有人可以帮助我解决这个问题吗？就像我在这里缺少的一样？

export const FormikSelectField = ({ label, ...props }) => {
  const [field, meta] = useField(props);
  const [isFocused, setOnFocus] = useState(false);

  const handleChange = (value) => {
    // this is going to call setFieldValue and manually update values.topcis
    console.log('Value in handlechange..', value ,'and', props.name);
    props.onChange(props.name, value.value);
  };

  const handleFocus = () => {
    setOnFocus(true);
  };
  const handleBlur = (e) => {
    // this is going to call setFieldTouched and manually update touched.topcis
    setOnFocus(false);
    props.onBlur(props.name, true);
    field.onBlur(e); …

我在提交表单时遇到了 React hook 表单和material-ui 文件上传的问题，我得到了一个文件的字符串路径而不是 FileList 实例

        <Controller
          name='attachments'
          control={control}
          defaultValue=''
          render={({ field }) => <input {...field} type='file' multiple />}
        />

       

codesanbox 上的完整代码：

https://codesandbox.io/s/xenodochial-bhaskara-9vo13?file=/src/App.js

我是 yup 验证的新手，我正在使用以下选项填充反应选择下拉列表。现在，当我单击一个按钮时，尝试验证是否选择了任何值。但它没有验证。任何帮助深表感谢。

const options = [
        { value: 'active', label: 'Active' },
        { value: 'inactive', label: 'In Active' },
        { value: 'deleted', label: 'Delete' },
 ];

<Select
  defaultValue={options[0]}
  isSearchable={false}
  className="react-dropdown"
  onChange={statusDropdownHandleChange}
  classNamePrefix="dropdown"
  options={options}
  name="status"
  {...register("status")}
/>


let schema = yup.object().shape({
    status: yup.object().shape({
      label: yup.string().required("status is required"),
      value: yup.string().required("status is required")
    })
 });

我需要验证 yup 中的枚举数组。

我正在使用打字稿，因此我必须在验证期间使用枚举的确切类型。虽然使用字符串数组似乎可行，但我想验证确切的枚举数组而不是字符串。有办法做到这一点吗？

我还添加了一个工作的codesandbox https://codesandbox.io/s/clever-edison-3vqp1

这是我打算做的事情的一个片段

import { object, array } from "yup";

enum DayEnum {
  Sunday = "Sunday",
  Monday = "Monday",
  Tuesday = "Tuesday",
  Wednesday = "Wednesday",
  Thursday = "Thursday",
  Friday = "Friday",
  Saturday = "Saturday"
}

const daysSchema = object({
  // days_of_week: array(string()),
  days_of_week: array(DayEnum)
});

const main = async () => {
  console.log(
    await daysSchema.isValid({
      days_of_week: [DayEnum.Sunday, DayEnum.Saturday]
    })
  );
};

main();

react-hook-form我正在和的帮助下创建一个带有文件上传的表单Yup。我正在尝试在我的子组件中使用 register 方法。当将寄存器作为道具传递时（在大括号中解构），验证和提交不起作用。您始终可以提交表单，并且提交的文件对象为空。这是一个沙盒链接。

我正在尝试使用react-intl 来创建本地化验证模式。然而，我能找到的只是与 i18n 的集成。我已经使用react-intl作为我的主要本地化工具；因此，我想继续使用这个工具。是否可以使用react-intl为yup创建一个功能本地化？我正在单独的文件中创建验证模式仅供参考。

感谢您的任何提示

CodeSandbox 问题示例

TLDR：我需要使用本地化验证消息。反应国际。目前我不确定如何传递本地化 ID 并在渲染组件中对其进行翻译。

我目前有一个如下所示的对象：

const initialValues = {
  created: {
    position: 1,
    name: 'created',
    type: 'timestamp',
    desc: 'The date and time the lead is created',
    mapping: {
      name: '',
      defaultValue: '',
      map: false
    }
  }
}

我希望当映射对象中的映射值设置为 true 时，映射对象中的名称成为必需的。我已尝试通过执行以下操作：

const validationSchema = yup.object({
  created: yup.object().when('mapping.map', {
    is: true,
    then: yup.object({
      mapping: yup.object({
        name: yup.string().required('name is required')
      })
    })
  })
})

我相信我没有足够的隧道来准确设置映射对象的验证，任何和所有帮助/建议将不胜感激。

我正在开发下一个 js 项目，在刷新页面时出现此错误。但是，当我从头开始登录然后访问其他页面时，就不会出现此错误。但如果从 api 获取数据时出现任何错误，则会出现该错误。

这是完整的日志：

Uncaught Error: Cannot find module 'C:\Users\abhit\Desktop\Minimal_JavaScript_v3.0.0\Minimal_JavaScript_v3.0.0\modified\node_modules\@hookform\resolvers\yup\dist\yup'
at createEsmNotFoundErr (node:internal/modules/cjs/loader:960:15)
at finalizeEsmResolution (node:internal/modules/cjs/loader:953:15)
at resolveExports (node:internal/modules/cjs/loader:483:14)
at Module._findPath (node:internal/modules/cjs/loader:523:31)
at Module._resolveFilename (node:internal/modules/cjs/loader:925:27)
at mod._resolveFilename (file://C:\Users\abhit\Desktop\Minimal_JavaScript_v3.0.0\Minimal_JavaScript_v3.0.0\modified\node_modules\next\dist\build\webpack\require-hook.js:27:32)
at mod._resolveFilename (file://C:\Users\abhit\Desktop\Minimal_JavaScript_v3.0.0\Minimal_JavaScript_v3.0.0\modified\node_modules\next\dist\build\webpack\require-hook.js:27:32)
at mod._resolveFilename (file://C:\Users\abhit\Desktop\Minimal_JavaScript_v3.0.0\Minimal_JavaScript_v3.0.0\modified\node_modules\next\dist\build\webpack\require-hook.js:27:32)
at Module._load (node:internal/modules/cjs/loader:780:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
getServerError @ client.js?4d30:7
eval @ index.js?46cb:709
setTimeout (async)

这是我的 package.json：

{
 "name": "apsit-community",
 "author": "apsit",
 "version": "1.0.0",
 "description": "Platform build by students for the students.",
 "private": true,
 "scripts": {
   "lint": "next lint",
   "lint:es": "eslint --ext .js,.jsx .",
   "lint:fix": …

您好，我对YUP很陌生，想尝试一下它:)

我可以进行基本的（内置）验证工作，但似乎无法弄清楚如何进行涉及数学运算的验证。

例如，我知道您可以使用Yup.ref（'field'）和.lessThan来针对field_2验证field_1，但是如果您想做这样的事情怎么办？

如果（（field_1 * field_2} <field_3）{返回错误}

通过阅读文档，我知道您可以向yup添加自定义方法（即：addMethod），但是到目前为止，我仍然无法使这种方法起作用。

任何帮助或指向如何以这种方式使用addMethod的可靠示例的链接，将不胜感激。提前致谢。