Heim  >  Fragen und Antworten  >  Hauptteil

Die Validierung der nativen React-Hook-Form-Controller-Regeln funktioniert nicht

Ich habe eine App mit React Native entwickelt. Ich verwende React-Hook-Form für Anmelde- und Registrierungsbildschirme. Ich habe ein Validierungsschema erstellt. Ich kann dieses Validierungsschema nicht mit den Regeln des React-Hook-Form-Controllers verwenden, da ich den Eingabewert nicht zuweisen kann. Bitte helfen Sie!

const formKeys = {
    email: 'email',
    password: 'password',
  };

  const {
    handleSubmit,
    control,
    formState: {errors},
  } = useForm();

<Controller
                control={control}
                name={formKeys.email}
                render={({field: {onChange, value}}) => (
                  <InputFields
                    errorMessage={errors[formKeys.email]?.message.toString()}
                    value={value}
                    onChangeText={onChange}
                    autoCapitalize={'none'}
                    placeholder={t('common:email')}
                    image={
                      <View style={styles.userIconsStyle}>
                        <EmailIcon/>
                      </View>
                    }
                  />
                )}
                rules={{
                  required: emailValidation() //input value required here,
                  minLength: minLengthValidation(validationSchema.email.minLength),
                  maxLength:maxLengthValidation(validationSchema.email.maxLength),
                }}
              />

/*validation schema*/

export const emailValidation = (v: string): boolean | string => {
  const {t,i18n}=useTranslation();
  const emailRegx = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[A-Za-z]+$/;
  if (v) {
    return emailRegx.test(v) || `${t('common:errorMessages:invalidEmailAddress')}`;
  } else return `${t('common:email')} ${t('common:errorMessages:isRequired')}`;
};

P粉445714413P粉445714413229 Tage vor442

Antworte allen(1)Ich werde antworten

  • P粉811329034

    P粉8113290342024-03-27 11:04:11

    我使用 React js 创建了一个简单的示例,而不是 React Native(此处不会有所不同)

    import { useForm, Controller } from "react-hook-form";
    
    type FormValues = {
      email: string;
    };
    
    const emailValidation = (v: string): boolean | string => {
      // const {t,i18n}=useTranslation();
      const emailRegx = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[A-Za-z]+$/;
      if (v) {
        return emailRegx.test(v) || "invalidEmailAddress";
      } else return "isRequired";
    };
    
    export default function App() {
      const { handleSubmit, control, formState: {errors} } = useForm({mode: 'onChange'});
    
      console.log(errors);
      
      return (
        
    console.log(data))}> ( )} rules={{ validate: { required: (value) => emailValidation(value) }, }} /> ); }

    沙箱示例这里

    Antwort
    0
  • StornierenAntwort