>  Q&A  >  본문

반응 네이티브 반응 후크 양식 컨트롤러 규칙 검증이 작동하지 않습니다.

React Native를 사용하여 개발한 앱이 있습니다. 로그인 및 등록 화면에 React-hook-form을 사용하고 있습니다. 내가 만든 유효성 검사 스키마가 있습니다. 입력 값을 할당할 수 없기 때문에 React-Hook-Form 컨트롤러 규칙과 함께 이 유효성 검사 체계를 사용할 수 없습니다. 도와주세요!

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일 전444

모든 응답(1)나는 대답할 것이다

  • P粉811329034

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

    React Native 대신 React js를 사용하여 간단한 예제를 만들었습니다. (여기서도 다르지 않습니다.)

    으아악

    샌드박스예제

    회신하다
    0
  • 취소회신하다