Как реализовать проверку на уникальность имени пользователя и отображение ошибки в оповещении в моем случае? - PullRequest
Новая
       62

Как реализовать проверку на уникальность имени пользователя и отображение ошибки в оповещении в моем случае?

1 голос
/ 11 апреля 2020

Я реализую авторизацию и регистрацию в приложении, используя Fomik и Yup.

У меня есть локальный сервер на моем компьютере. Папка с этим сервером находится рядом с папкой моего проекта. Я просто запускаю сервер благодаря команде adonis serve. Когда сервер запущен. Я пишу в полях формы: имя пользователя, пароль и другие ... И затем, если проверка прошла успешно, я нажимаю кнопку «Отправить» и получаю ответ от моего локального сервера. Этот ответ содержит токен jwt.

Теперь во время проверки формы я просто проверяю, написано ли что-то в поле имени пользователя. Но мне все еще нужно проверить, является ли имя пользователя уникальным, если нет, а имя пользователя с таким именем уже зарегистрировано, то отобразить ошибку в предупреждении.

Как осуществить проверку уникальности имени пользователя и отобразить ошибку в моем случае?

Некоторая часть RegistrationForm. js: 

const SignupForm = () => {
 const history = useHistory();

    const {handleSubmit, values, handleChange, errors, handleBlur, isSubmitting, setSubmitting} = useFormik({  
      initialValues: {
          username: '',
          password: '',
          confirm_password: '',
          first_name: '',
          last_name: '',
          phone:''
      },
        validateOnBlur: false, 
        validateOnchange: false,
        validationSchema: yup.object().shape({    
          username: yup.string()      
           .required('This field is required'),
          password: yup.string()
           .required('This field is required')
           .min(6, 'This password is too short')
           .max(30, 'This passwors is too long'),

        /.......

      }),   
      onSubmit: async (formValues) => {
          console.log('submit', formValues);
          setSubmitting(true);
          try {
              const res = await api('api/auth/register', {
                  method:'POST',
                  body: JSON.stringify(formValues)
              });
              const token = res.token.token;
              localStorage.setItem('myToken', token);
              console.log('Result!',token);
              history.push("/home");  
          } catch(e) {
              console.error(e);

          } finally {
              setSubmitting(false);
          }   
      },  
    });

   return (
   <form className="fform" onSubmit={handleSubmit}>   
       <SignupInput
         label="username"
         id="username" 
         inputProps={{
           name:'username',
           value: values.username,
           onChange: handleChange,
           onBlur: handleBlur,
           disabled: isSubmitting,
       }}
       error={errors.username}

        /.......

       <button type="submit" disabled={isSubmitting}>Submit Form</button>       
   </form>
   );
};

1 Ответ

0 голосов
/ 11 апреля 2020

Для проверки asyn c вы можете использовать функцию formik validate.

Примерно так: 

        ...
        validateOnchange: false,
    validate: (values, props) => {
      return fetch("https://reqres.in/api/users/2")
        .then(res => res.json())
        .then(res => {
          const errors = {};
          // if (res.data() === false) {
          if (res.data.email === "janet.weaver@reqres.in") {
            errors.username = "user already exists !";
          }
          return errors;
        });
    },
    validationSchema: yup.object().shape({
        ...

EDIT

Рабочий пример с поддельным API приведен здесь:

https://codesandbox.io/s/jovial-galois-ndbcu?file= / src / components / Registration / RegistrationForm. js

См. Также документы:

https://jaredpalmer.com/formik/docs/guides/validation

...