在我的案例中，如何对用户名的唯一性进行验证并在警报中显示错误？

Question

我使用Fomik和Yup在应用程序中实现授权和注册。

我的电脑上有一个本地服务器。该服务器的文件夹位于我的项目文件夹附近。由于 adonis serve 命令，我刚刚启动了服务器。服务器启动时。我在表单字段中写入：用户名、密码和其他...然后如果验证成功，我按下按钮提交，我从本地 server.This 收到包含 jwt 令牌的响应。

现在，在验证表单期间，我只需检查用户名字段中是否写入了内容。但是我仍然需要验证用户名是否唯一，如果不是并且具有该名称的用户名已经注册然后在警报中显示错误。

在我的案例中，如何实现用户名的唯一性校验和alert显示错误？

SignupForm.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>
   );
};

Answer 1

对于异步验证，您可以使用 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({
        ...

编辑

这里是假 api 的工作示例：

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

另见文档：

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

在我的案例中，如何对用户名的唯一性进行验证并在警报中显示错误？

How to implement verification on the uniqueness of the username and display error in alert in my case?

javascript

reactjs

yup

formik