如何使用React挂钩为电子邮件和密码编写验证

问题描述

我正在该项目中从事React工作，我试图通过以下方式编写对电子邮件和密码的验证 使用react钩子但是我不知道如何启动它，所以请帮助实现它。 我真正想要的是我在代码中对电子邮件和密码进行了硬编码。现在，我只想编写电子邮件和密码的验证。我真正想要的是如果我输入了错误的电子邮件和正确的密码，那么在“验证”中只需显示，请输入有效的电子邮件地址。 如果我输入正确的电子邮件，则必须显示正确的密码。如果两者均不正确，则必须显示验证信息，请输入正确的电子邮件和密码。

这是我的代码

import React,{ useState } from 'react';
import './Login.css';

const Login = () => {

    const [loginData,setLoginData] = useState(null)

    const loginCredentials = () => {
        if (loginData.email === '[e-mail]' && loginData.password === 'christina') {
        } else {
        }
    }


    const handleChange = ({ target }) => {
        const { name,value } = target
        const newData = Object.assign({},loginData,{ [name]: value })
        setLoginData(newData)
    }


    const handleSubmit = (e) => {
        e.preventDefault()
        loginCredentials()
    }  

return (
        <div className='container'>
            <div className='row justify-content-center'>
                <div className='col-4'>
                    <div className='mainform mt-3'>
                        <form onSubmit={handleSubmit}>
                            <div className="form-group">
                                <label htmlFor="email">Email</label>
                                <input type="email" name='email' className="form-control" id="email" onChange={handleChange}></input>
                            </div>
                            <div className="form-group">
                                <label htmlFor="password">Password</label>
                                <input type="password" name='password' className="form-control" id="password" onChange={handleChange}></input>
                            </div>
                    
                            <button type="submit"  className="btn btn-primary">Submit</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Login

解决方法

尝试将错误保存在数组中，并在最后检查数组的长度。

const [errors,setErrors]=useState([]);
.
.
.
if(username !='[e-mail]')
{
   setErrors([...errors,{error:'Invalid username'}])
}
if(password!='something')
{
   setErrors([...errors,{error:'Invalid password'}])
}

现在在组件内部

{errors?errors.map(elem=>elem.error):null}

,

您可以为错误消息创建状态并根据电子邮件和密码的不正确组合更改其值。如果

const [errorMessage,setErrorMessage] = useState('')
const loginCredentials = () => {
        if (loginData.email !== '[e-mail]' && loginData.password !== 'christina') {
         setErrorMessage('email and pw are both incorrect')
        } else if (loginData.email !== '[e-mail]' {
         setErrorMessage('email is incorrect')
        } else if {.....etc
    }

然后将{errorMessage}放入您希望显示的jsx

,

如果不可以使用嵌套

const [error,setError] = useState("");
const loginCredentials = () => {
    if (loginData.email === "[e-mail]") {
        if (loginData.password === "christina") {
            setError("");
            return true;
        }
        else
        {
            setError("Incorrect Password");
            return false;
        }
    } else {
        setError("Incorrect Email and password");
        return false;
    }
};

要显示错误，您可以将div放置在表单中的某处，该表单仅在出现错误时显示。

{error && <div>{error}</div>}

,

首先，您的输入值不是受控元素。了解“受控组件”。

有很多方法可以实现这一目标。 我认为您可以添加一个自定义钩子来处理onChange和重置处理程序。

自定义挂钩：

import { useState } from 'react';

const useInputState = (initialValues) => {
  const [state,setstate] = useState(initialValues);

  const onChangeHandler = (e) => setstate({
    ...state,[e.target.name]: e.target.value,});

  const reset = (field) => {
    if (field) {
      setstate({
        ...state,[field]: initialValues[field],});
    } else {
      setstate({
        ...initialValues,});
    }
  };

  return [state,onChangeHandler,reset];
};

export default useInputState;

然后在组件中消耗该钩子。

import React,{ useState } from 'react';
import UseInputState from '../hooks/useInputState';

const App = () => {
  const [value,reset] = UseInputState('');

  console.log({ value });

  const [emailAlert,setEmailAlert] = useState(null);
  const [passwordAlert,setPasswordAlert] = useState(null);

  const loginCredentials = () => {
    setEmailAlert(null);
    setPasswordAlert(null);
    const { email,password } = value;
    if (email !== '[e-mail]') {
      setEmailAlert('Please Enter valid Email Address');
    }
    if (password !== 'christina') {
      setPasswordAlert(' please enter correct password');
    }

    reset('');

    if (password === 'christina' && email === '[e-mail]') {
      setEmailAlert(null);
      setPasswordAlert(null);
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    loginCredentials();
  };

  return (
    <div className='container'>
      <div className='row justify-content-center'>
        <div className='col-4'>
          <div className='mainform mt-3'>
            <form onSubmit={handleSubmit}>
              <div className='form-group'>
                <label htmlFor='email'>Email</label>
                <input
                  type='email'
                  name='email'
                  className='form-control'
                  id='email'
                  value={value.email || ''}
                  onChange={onChangeHandler}
                ></input>
              </div>
              <div className='form-group'>
                <label htmlFor='password'>Password</label>
                <input
                  type='password'
                  name='password'
                  className='form-control'
                  id='password'
                  value={value.password || ''}
                  onChange={onChangeHandler}
                ></input>
              </div>

              <button type='submit' className='btn btn-primary'>
                Submit
              </button>
            </form>

            {emailAlert && <div>{emailAlert}</div>}
            {passwordAlert && <div>{passwordAlert}</div>}
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;