时间戳

首页 > 解决方案 > 如何添加电子邮件存在验证以基于 Api 响应响应 js

reactjs - 如何添加电子邮件存在验证以基于 Api 响应响应 js

问题描述

表单项以显示表单字段这是我的代码

import { Form, Input, Button, Select, } from 'antd';
import axios from "axios";

render() {
    const isLoading = this.state.isLoading;
    return (
        <>
            <Form className={'auth-form'} onSubmit={(e) => { this.onSubmit(e) }}>
                <h3 className={'mb-5 text-center'}>Candidate Sign Up</h3>

                <Form.Item
                    label=""
                    name="email"
                    rules={[{ required: true, type: 'email', message: 'Please enter email address'}]}
                >
                    <Input className={'ks-form-control'} placeholder={'Enter Email'} onChange={this.onChangehandler} />
                </Form.Item>
                <Form.Item
                    label=""
                    name="password"
                    rules={[{ required: true, message: 'Please input your password!' }]}
                >
                    <Input.Password className={'ks-form-control'} placeholder={'Password'} />
                </Form.Item>
                <Form.Item
                    label=""
                    name="confirmPassword"
                    rules={[{ required: true, message: 'Please confirm your password!' }]}
                >
                    <Input.Password className={'ks-form-control'} placeholder={'Confirm Password'} />
                </Form.Item>
                
                <Form.Item >
                    <Button className={'btn-custom px-4 py-2 d-block w-100'} type="primary" htmlType="submit">
                        Create an account
                    </Button>
                </Form.Item>
                
            </Form>
        </>
    )
}

这是提交处理程序的代码。我想在 rules={[{}]} 处显示来自 api 的消息和使用以下代码的自定义消息

msg: response.data.message

在提交处理程序

onSubmitHandler = (e) => {
  e.preventDefault();
    this.setState({ isLoading: true });
    axios
        .post("http://127.0.0.1:8000/api/user-signup", this.state.signupData)
        .then((response) => {
            this.setState({ isLoading: false });
            if (response.data.status === 200) {
                this.setState({
                    msg: response.data.message // message comming from api
                   
                });
               
            }

            if (response.data.status === "failed") {
                this.setState({ msg: response.data.message }); // message comming from api
                  
            }
        });
}

所有字段的验证都与 rules={[]} 一起正常工作。但是我想根据 api 响应显示错误，例如如果电子邮件已经注册，那么这将显示消息“电子邮件已经存在”请告诉我我该怎么做

标签： reactjs

解决方案

了解什么是 Form.Item 以及您在此处使用的 UI 库会很有帮助。如果您可以在组件上设置规则，您可能还可以设置“错误”属性。我对您提供的内容的最佳猜测是：

const [emailError, setEmailError] = useState(false)

const =  onSubmit = (formvalues) => {
  const { email } = formvalues
  validateEmailViaAPI(email).then((response) => response.isValid ? doWhatEver(formvalues) : setEmailError(true))
}

const onChangeEmail = () => setEmailError(false)

在您的输入组件中，您可以专门设置错误：

<Form.Input error={emailError}>  </Form.Input>

如果您自己设置错误，这应该会显示错误消息。这可能发生在组件使用的“规则”属性后面。

不要忘记在有用的地方清除错误。如果您多次使用它，将验证放在自定义钩子中是有意义的。

如果这没有帮助，请提供有关您正在使用的输入组件的更多输入。

推荐阅读