Javascript 如何在onBlur上同时使用同步和异步验证规则验证表单字段？

我有在

onBlur

和

onKeyDown

上进行验证的表单。我的问题是实现电子邮件字段的验证。任务是使用正则表达式在前端检查此字段，如果是真的，我应该在后端使用现有API点检查数据库中是否存在此字段。 我使用函数

useForm

实现表单，该函数具有

initialValues

（表单字段的初始值对象）、

callback

（在按下Submit后调用的函数）、

validate

（验证每个表单字段的函数）作为参数

const useForm = (initialValues, callback, validate) => {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});

  const performValidation = (name) => {
    const validationErrors = validate({ [name]: values[name] });
    setErrors({...errors, ...validationErrors} );
  };

  const handleKeyDown = (event) => {
    if(event.which === ENTER_KEY_CODE || event.which === TAB_KEY_CODE)
      performValidation(event.target.name);
  };

  const handleBlur = ({ target : { name } }) => {
    performValidation(name);
  };
.....
  return {
    values,
    errors,
    handleChange,
    handleKeyDown,
    handleBlur,
  }
}

表格用途：

  const {
    values, errors, handleChange, handleKeyDown, handleBlur, handleSubmit,
  } = useForm(initialValuesForRegistration, submitHandler, formValidationFunction);

    <form onSubmit={handleSubmit} noValidate>
        <Input
          type='text'
          name={formFieldNames.email}
          value={values.email}
          errMessage={errors.email}
          onChange={handleChange}
          onKeyDown={handleKeyDown}
          onBlur={handleBlur}
        />

---

您能为我提供一些如何实施此问题的建议吗？

您可以这样验证电子邮件：-

handleValidation(){
        let fields = this.state.email;
        let errors = {};
        let formIsValid = true;
        if(!fields["email"]){
           formIsValid = false;
           errors["email"] = "Cannot be empty";
        }

        if(typeof fields["email"] !== "undefined"){
           let lastAtPos = fields["email"].lastIndexOf('@');
           let lastDotPos = fields["email"].lastIndexOf('.');

           if (!(lastAtPos < lastDotPos && lastAtPos > 0 && fields["email"].indexOf('@@') == -1 && lastDotPos > 2 && (fields["email"].length - lastDotPos) > 2)) {
              formIsValid = false;
              errors["email"] = "Email is not valid";
            }
       }  

       this.setState({errors: errors});
       return formIsValid;
   }

handleValidation（）{
让fields=this.state.email；
让错误={}；
让formIsValid=true；
如果（！字段[“电子邮件”]）{
formIsValid=false；
错误[“电子邮件”]=“不能为空”；
}
如果（字段类型[“电子邮件”]！=“未定义”）{
让lastAtPos=fields[“email”].lastIndexOf（'@'）；
让lastDotPos=fields[“email”].lastIndexOf（'.'）；
如果（！（lastAtPos0&&fields[“email”].indexOf（'@'）==-1&&lastDotPos>2&&fields[“email”].length-lastDotPos>2））{
formIsValid=false；
错误[“电子邮件”]=“电子邮件无效”；
}
}  
this.setState（{errors:errors}）；
返回formIsValid；
}

重点不是编写我的同步验证函数，而是使用我现有的同步函数

checkEmail

和一些其他函数来处理双重验证的情况，这些函数将调用api点，等待响应并在出现错误时设置错误。

handleValidation(){
        let fields = this.state.email;
        let errors = {};
        let formIsValid = true;
        if(!fields["email"]){
           formIsValid = false;
           errors["email"] = "Cannot be empty";
        }

        if(typeof fields["email"] !== "undefined"){
           let lastAtPos = fields["email"].lastIndexOf('@');
           let lastDotPos = fields["email"].lastIndexOf('.');

           if (!(lastAtPos < lastDotPos && lastAtPos > 0 && fields["email"].indexOf('@@') == -1 && lastDotPos > 2 && (fields["email"].length - lastDotPos) > 2)) {
              formIsValid = false;
              errors["email"] = "Email is not valid";
            }
       }  

       this.setState({errors: errors});
       return formIsValid;
   }