标签: formik

是否有一个验证特定长度的yup函数？

我试过.min(5)和.max(5),但我想要的东西,保证数量正好是5个字符(即邮政编码).

我正在使用 formik 和 yup 来处理我的表单，我需要验证 formik 在初始值中设置的两个对象：

initialValues: {\n  company: { company_name: \'\', cnpj: \'\', fantasy_name: \'\', state_registration: \'\' },\n  user: { email: \'\', password: \'\' }\n},\nvalidationSchema: schema,\n

这是我的验证模式：

  const schema = Yup.object().shape({\n    company_name: Yup.string().required(\'Informe o nome da filial!\'),\n    cnpj: Yup.string().required(\'Informe o cnpj!\'),\n    email: Yup.string().email(\'Email n\xc3\xa3o possui formato v\xc3\xa1lido\').required(\'Informe o e-mail\'),\n    password: Yup.string().required(\'Informe a senha\')\n  })\n

我如何才能再增加一个级别（用户/公司）？\n我尝试了类似的操作：

company.company_name: Yup.string().required(\'Informe o nome da filial!\')\n

但我收到：

\n

解析错误：意外的标记，预期为“，”

\n

我怎样才能做到这一点？

我也尝试过：

  const …

我正在尝试使用Formik与Material-UI文本字段.像这样:

import TextField from '@material-ui/core/TextField';
import {
  Field,
  FieldProps,
  Form,
  Formik,
  FormikErrors,
  FormikProps
} from 'formik';
import React, { Component } from 'react';

interface IMyFormValues {
  firstName: string;
}

class CreateAgreementForm extends Component<{}> {
  public render() {
    return (
      <div>
        <h1>My Example</h1>
        <Formik
          initialValues={{ firstName: '' }}
          // tslint:disable-next-line:jsx-no-lambda
          onSubmit={(values: IMyFormValues) => alert(JSON.stringify(values))}
          // tslint:disable-next-line:jsx-no-lambda
          validate={(values: IMyFormValues) => {
            const errors: FormikErrors<IMyFormValues> = {};
            if (!values.firstName) {
              errors.firstName = 'Required';
            }
            return errors;
          }}
          // tslint:disable-next-line:jsx-no-lambda
          render={(formikBag: FormikProps<IMyFormValues>) => ( …

我正在使用Yup来验证我的表单。在我的一种形式中，我想验证<input type="file" />一个文件是否存在。

我已经测试过这个（它不起作用）：

Yup.object().shape({
  file: Yup.object().shape({
    name: Yup.string().required()
}).required('File required')

我在控制台中有以下错误消息：

file 必须是一种object类型，但最终值是：（null从值转换{}）。如果“null”打算作为空值，请确保将架构标记为.nullable()

任何的想法？

我是 React 的新手，我正在使用 FormIK，它可以很好地发布表单数据，除非我向其中添加隐藏字段。

<Field type="hidden" className="form-control" name="hiddenField" /> 

当我发布表单时，它会发送隐藏字段的空值我也向 Formik 提供了初始值

<Formik initialValues={{
first_name:'',last_name:'',username:'',email:'',password:'',
password_confirmation:'',distributor:'',phone_number:'',address:'',country:'',
state:'',city:'',zip_code:'',hiddenField:''
}} >

有什么遗漏吗？

我有多步骤表格申请。在第一页上，用户填写表格。第二页是确认页面，用户可以在其中检查所有数据，或者可以编辑它们，然后返回到第一页。在表单页面上，我禁用了提交按钮，直到它通过所有验证规则

           <Button\n              type="submit"\n              disabled={!(formik.isValid && formik.dirty)}\n              onClick={() => {\n                dispatch(sendSms()).then(() => {\n                  setModal(true);\n                });\n              }}\n            >\n              \xd0\x9f\xd1\x80\xd0\xbe\xd0\xb4\xd0\xbe\xd0\xbb\xd0\xb6\xd0\xb8\xd1\x82\xd1\x8c\n           </Button>\n

所以问题是当我返回时，提交按钮被禁用。我需要将脏属性设置为“true”。怎样制作呢？

 <Formik\n    initialValues={formValues || initialValues}\n    validationSchema={validationSchema}\n    enableReinitialize\n    onSubmit={onSubmit}\n    onChange={onSubmit}\n    validateOnMount={true}\n  >\n\nconst onSubmit = (values, submitProps) => {\n  setFormValues(values);\n  submitProps.resetForm();  \n};\n

我在 reactjs 中使用 formik 进行表单管理，我有一个关于验证的问题。

我有两个字段，一个是选择国家的选择控件，另一个是邮政编码。

在 country 数组中，我们有正则表达式来验证邮政编码，其想法是使用当前所选国家/地区的正则表达式验证输入的邮政编码，有人可以提供有关如何执行此操作的线索。

我有一个这样的数据结构：

{
  "subject": "Ah yeah",
  "description": "Jeg siger...",
  "daysOfWeek": [
    {
      "dayOfWeek": "MONDAY",
      "checked": false
    },
    {
      "dayOfWeek": "TUESDAY",
      "checked": false
    },
    {
      "dayOfWeek": "WEDNESDAY",
      "checked": true
    },
    {
      "dayOfWeek": "THURSDAY",
      "checked": false
    },
    {
      "dayOfWeek": "FRIDAY",
      "checked": false
    },
    {
      "dayOfWeek": "SATURDAY",
      "checked": true
    },
    {
      "dayOfWeek": "SUNDAY",
      "checked": true
    }
  ],
  "uuid": "da8f56a2-625f-400d-800d-c975bead0cff",
  "taskSchedules": [],
  "isInitial": false,
  "hasChanged": false
}

在daysOfWeek我想确保至少有一个项目有checked: true.

到目前为止，这是我的验证模式（但不起作用）：

const taskValidationSchema = Yup.object().shape({
  subject: Yup.string().required('Required'),
  description: Yup.string(),
  daysOfWeek: Yup.array()
    .of( …

我正在使用在架构上定义的 Formik React Form 和 Yup 验证：

export const Contact = yup.object<IContact>().shape({
  contactName: yup
    .string()
    .trim('The contact name cannot include leading and trailing spaces')
    .strict(true)
    .min(1, 'The contact name needs to be at least 1 char')
    .max(512, 'The contact name cannot exceed 512 char')
    .required('The contact Name is required'),
});

有没有办法让 Yup 修剪空白而不显示消息？那么在提交表单时自动修剪空格？

我正在尝试yup使用formik. 我的验证似乎有效，但我觉得它太冗长了。

试图使用 的.addMethod()功能yup，但在语法上陷入困境，或者这可能是矫枉过正？

摘要：我想将我的验证转换为使用yup.addMethod().

实际验证：

import * as yup from 'yup'

const countryNameRegex = /[A-Za-z]/g;
const countryCodeRegex = /[a-zA-Z]{2,}/g;
const isRequired = 'Required Field'
const isCorrectFormat = 'The country name may contain only letters'

const countryValidationSchema = yup.object().shape({
  name: yup.string()
    .min(3, `country name must contain at least 3 characters`)
    .matches(
      countryNameRegex,
      {
        message: isCorrectFormat,
        excludeEmptyStrings: true
      }
    )
    .label(`Country Name`)
    .required(isRequired),
  code: yup.string()
    .length(2, `The country code must be …