Question

我已经在React Native中实现了Yup + Formik用于表单处理。

我的表单中有title和正文input字段。正在显示title的验证错误，但没有显示与body相关的错误消息。



const ReviewSchema = yup.object(
  {
    title: yup.string().required().min(2),
  },
  {
    body: yup.string().required().min(3),
  }
);

function Adddata() {
  return (
    <View>
      <Formik
        initialValues={{ title: "", body: "" }}
        validationSchema={ReviewSchema}
        onSubmit={(v) => {
          console.log(v);
        }}
      >
        {(props) => (
          <View>
            <TextInput
              value={props.values.title}
              onChangeText={props.handleChange("title")}
            />
            <Text>{props.errors.title}</Text>
            <TextInput
              value={props.values.body}
              onChangeText={props.handleChange("body")}
            />
            <Text>{props.errors.body}</Text>


          </View>
        )}
      </Formik>

Answer 1

您可以尝试将对象参数更改为形状吗？
并在require方法中插入参数消息？

例如：

Yup.object().shape({title: Yup.string().required("Please Insert")});

如果行不通，您可以尝试更改

handleChange()

收件人

setFieldValues(fieldName,value) //Definitely From Formik props

并进行一些handleSubmit验证（检查validateOnSubmit，尽管可以使用validateOnBlur进行验证）。谢谢你。

Answer 2

 const initialValues = { email: '', password: '', capcha: '' };

 const validationSchema = Yup.object().shape({
    email: Yup.string()
      .required("please! email?")
      .email("well that's not an email"),
    password: Yup.string()
      .required("please! PASSWORD?")
      .min(4, "pretty sure this will be hacked"),
    capcha: Yup.string()
      .required("please! capcha?")
      .min(5, "pretty sure capcha is correct?")
  });

 return (
    <Formik
      initialValues={initialValues}
      validationSchema={validationSchema}
      onSubmit={(values, actions) => {

        console.log("Submitted: ", JSON.stringify(values));
        // actions.setSubmitting(false);

        setTimeout(() => { actions.setSubmitting(false) }, 1000);


      }}
    >
      {(props) => (

        <View>
          {console.log(" ____retutn ______ " + JSON.stringify(props))}
          <TextInput
            placeholder='Email'
            onChangeText={props.handleChange('email')}
            value={props.values.email}
            name="email" // added this
            type="email"
            setFieldTouched='email'
            placeholderTextColor='grey'
            underlineColorAndroid="grey"
            returnKeyType="next"
            onBlur={() => props.setFieldTouched('email')}
          />

          {
            props.touched.email && props.errors.email && (
              <Text style={{ fontSize: 30, color: 'red' }}>{props.errors.email}</Text>
            )
          }

          <TextInput
            placeholder='Password'
            onChangeText={props.handleChange('password')}
            value={props.values.password}
            name="password" // added this
            type="password"
            returnKeyType="next"
            placeholderTextColor='grey'
            underlineColorAndroid="grey"
          />

          {
            props.touched.password && props.errors.password && (
              <Text style={{ fontSize: 30, color: 'red' }}>{props.errors.password}</Text>
            )
          }
          <TextInput
            placeholder='CAPCHA (1-5)'
            onChangeText={props.handleChange('capcha')}
            value={props.values.rating}
            name="email" // added this
            type="capcha"
            returnKeyType="done"
            placeholderTextColor='grey'
            underlineColorAndroid="grey"
          />
          {
            props.touched.capcha && props.errors.capcha && (
              <Text style={{ fontSize: 30, color: 'red', marginBottom: 20 }}>{props.errors.capcha}</Text>
            )
          }
          
          <Button
            style={{ margin: 20 }}
            title='Submit'
            color='red'
            onPress={props.handleSubmit}
            disabled={props.isSubmitting}
          />
          
        </View>

      )}


    </Formik>
  )

Answer 3

我忘了在Reviewschema中创建一个对象，而是创建了许多对象

正确的方法如下

const ReviewSchema = yup.object({
  title: yup.string().required().min(2),

  body: yup.string().required().min(3),


});

React Native，来自Formik-Yup验证的错误未显示

3 个答案: