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

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

我的计算机上有一个本地服务器。此服务器的文件夹位于我的项目文件夹附近。多亏了adonisserve命令，我才启动了服务器。 当服务器启动时。我在表单字段中写入：用户名、密码和其他…然后，如果验证成功，我按submit按钮，从本地服务器获得响应。此响应包含jwt令牌

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

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

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

const SignupForm=（）=>{
const history=useHistory（）；
const{handleSubmit，values，handleChange，errors，handleBlur，isSubmitting，setSubmitting}=useFormik（{
初始值：{
用户名：“”，
密码：“”，
确认密码：“”，
名字：''，
姓氏：“”，
电话：''
},
模糊：错，
更改：错误，
validationSchema:yup.object（）.shape（{
用户名：yup.string（）
.required（“此字段为必填项”），
密码：yup.string（）
.required（'此字段为必填项'）
.min（6，‘此密码太短’）
.max（30，“此密码太长”），
/.......
}),   
onSubmit:async（formValues）=>{
console.log（'submit'，formValues）；
设置提交（真）；
试一试{
const res=等待api（'api/auth/register'{
方法：'POST'，
正文：JSON.stringify（formValues）
});
const token=res.token.token；
setItem（'myToken'，token）；
log（'Result！'，token）；
历史推送（“/主页”）；
}捕获（e）{
控制台错误（e）；
}最后{
设置提交（假）；
}   
},  
});
返回(
对于异步验证，您可以使用formik的
validate
函数

类似这样的内容：

。。。
更改：错误，
验证：（值、道具）=>{
返回取回（“https://reqres.in/api/users/2")
.then（res=>res.json（））
。然后（res=>{
常量错误={}；
//if（res.data（）==false）{
如果（res.data.email==”珍妮特。weaver@reqres.in") {
errors.username=“用户已存在！”；
}
返回错误；
});
},
validationSchema:yup.object（）.shape({
...

编辑

使用假api的工作示例如下：


另请参见文档：

对于异步验证，您可以使用formik的
验证
功能

类似这样的内容：

。。。
更改：错误，
验证：（值、道具）=>{
返回取回（“https://reqres.in/api/users/2")
.then（res=>res.json（））
。然后（res=>{
常量错误={}；
//if（res.data（）==false）{
如果（res.data.email==”珍妮特。weaver@reqres.in") {
errors.username=“用户已存在！”；
}
返回错误；
});
},
validationSchema:yup.object（）.shape({
...

编辑

使用假api的工作示例如下：


另请参见文档：

当您调用'api/auth/register'@HermitCrab如何进行验证时，您应该在服务器上进行此验证？С您演示了吗？我从来没有这样做过。您必须将您的用户名存储在后端的数据库中。您的注册api应该检查提供的用户名是否尚未注册，如果已注册，则向React应用程序返回一个错误d显示错误消息您应该在服务器上执行此验证，当您调用'api/auth/register'@HermitCrab如何执行此验证？С您演示了吗？我从来没有这样做过。您必须将用户名存储在后端的数据库中。您的注册api应该检查提供的用户名是否尚未注册，如果已注册，则返回错误到React应用程序并显示错误消息我已使用工作示例更新了答案…如果有任何问题，请告知我我已使用工作示例更新了答案…如果有任何问题，请告知我