单击输入外部后显示验证

Question

我在我的表单中使用MUI，YUP，React Hook表单和React-Phone-number-Input软件包...我想在单击输入之外后显示验证和错误消息。

这是我的方法和模式，始终保持Onchange，直到长度达到10来激活按钮：

const PhoneNumberSchema = Yup.object().shape({
    phoneNumber: Yup.string().test('validateUsername', 'Invalid Phone Number', function (value: any) {
      const isValidPhone = isValidPhoneNumber(value || '');
      if (!isValidPhone || value?.length < 10) {
        return false;
      }
      return true;
    }),
  });

  const methods = useForm<UserPhoneNumberType>({
    resolver: yupResolver(PhoneNumberSchema),
    defaultValues,
    mode: 'onChange',
  });

const {
control,
handleSubmit,
getValues,
formState: { isValid, errors },
  } = methods;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

这是我的形式：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<Dialog fullWidth={true} open={true} keepMounted sx={{ minWidth: 600 }} onClose={handleBackRoute}>
        <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
          <Stack spacing={2} sx={{ py: 3 }}>
            <Stack direction="row" spacing={2} alignItems="center" sx={{ justifyContent: 'space-between', px: 2 }}>
              <Stack spacing={2} direction="row" alignItems="center">
                <IconButton sx={{ p: 0, mr: 2 }} onClick={handleBackRoute}>
                  <ArrowLeft />
                </IconButton>
                <Typography variant="subtitle1" color="text.primary">
                  {userPhoneNumber?.id ? 'Edit Phone Number' : 'Phone Number'}
                </Typography>
              </Stack>
              {!userPhoneNumber?.id ? (
                <IconButton onClick={handleBackRoute}>
                  <CloseSquare variant="Outline" />
                </IconButton>
              ) : (
                <IconButton onClick={closeHandler}>
                  <CloseSquare variant="Outline" />
                </IconButton>
              )}
            </Stack>
            <Divider />
            <ParentPhoneInputStyle>
              <Stack sx={{ mt: 1 }}>
                <Typography variant="subtitle1" sx={{ mb: 2 }}>
                  Phone Number
                </Typography>
                {!userPhoneNumber?.id ? (
                  <Controller
                    name="phoneNumber"
                    control={control}
                    render={({ field }) => (
                      <PhoneNumber
                        value={field.value}
                        isError={!!errors?.phoneNumber}
                        placeHolder="Enter phone number"
                        onChange={field.onChange}
                      />
                    )}
                  />
                ) : (
                  <Stack direction="row" justifyContent="space-between" sx={{ mt: 1, paddingBottom: 0 }}>
                    <Typography variant="body2">{userPhoneNumber.phoneNumber}</Typography>
                    <Typography variant="body2" color="primary">
                      {userPhoneNumber.status}
                    </Typography>
                  </Stack>
                )}
              </Stack>
              {!!errors?.phoneNumber && (
                <Typography component="div" variant="caption" sx={{ color: 'error.main', mt: 0.5 }}>
                  {errors?.phoneNumber?.message}
                </Typography>
              )}
            </ParentPhoneInputStyle>
            <Divider sx={{ mt: !!errors?.phoneNumber ? '32px !important' : '16px !important' }} />
            {!userPhoneNumber?.id ? (
              <Stack direction="row" spacing={2} alignItems="center" sx={{ justifyContent: 'space-between', px: 2 }}>
                <Link href={'/profile/select-audience-phone-number'} passHref>
                  <Button
                    variant="outlined"
                    startIcon={<Eye size="18" color={theme.palette.text.primary} />}
                    onClick={handleUpdateAudience}
                    endIcon={<ArrowDown2 size="16" color={theme.palette.text.primary} />}
                  >
                    <Typography color={theme.palette.text.primary}>
                      {Object.keys(AudienceEnum)[Object.values(AudienceEnum).indexOf(userPhoneNumber?.audience)]}
                    </Typography>
                  </Button>
                </Link>
                <LoadingButton loading={isLoading} type="submit" variant="contained" disabled={!isValid}>
                  Add
                </LoadingButton>
              </Stack>
            ) : (
              <Stack direction="row" spacing={2} alignItems="center" sx={{ px: 6 }}>
                <Button variant="text" color="error" onClick={() => handleDialogDeletePhoneNumber()}>
                  Delete
                </Button>
                <Link href={'/profile/select-audience-phone-number'} passHref>
                  <Button
                    variant="outlined"
                    startIcon={<Eye size="18" color={theme.palette.text.primary} />}
                    onClick={handleUpdateAudience}
                    endIcon={<ArrowDown2 size="16" color={theme.palette.text.primary} />}
                  >
                    <Typography color={theme.palette.text.primary}>
                      {Object.keys(AudienceEnum)[Object.values(AudienceEnum).indexOf(userPhoneNumber?.audience)]}
                    </Typography>
                  </Button>
                </Link>
              </Stack>
            )}
          </Stack>
        </FormProvider>
      </Dialog>

Answer 1

useForm({
  mode: 'onBlur',
  reValidateMode: 'onChange'
})

模式：onChange |模糊 |提交 |触碰 |全部<默认：onSubmit>

此选项允许您在用户提交表单（onSubmit 事件）之前配置验证策略。

reValidateMode：onChange |模糊 | onSubmit <默认：onChange>

此选项允许您配置在用户提交表单（onSubmit 事件）后重新验证有错误的输入时的验证策略。默认情况下，验证在输入更改事件期间触发。

参考： https://react-hook-form.com/api/useform