如何知道输入的是Email还是用户名

Question

我试图让用户使用 email 或用户名登录，我已经实现了后端，并且使用 Postman 可以正常工作，但我不知道如何在前端实现它，

Login.jsx:

export default function Login() {
  
  const [credentials, setCredentials] = useState({
      email: undefined,
      username: undefined,
      password: undefined,
    });
  
    const [loginErr, setMsg] = useState({
      fail: false,
      msg: "",

    });
  
    const { user, isFetching, dispatch } = useContext(Context);
  
    const handleChange = (e) => {
      setCredentials((prev) => ({ ...prev, [e.target.id]: e.target.value }));
    };
  
    const handleSubmit = async (e) => {
      e.preventDefault();
      dispatch({ type: "LOGIN_START" });
      try {
        const res = await axios.post("/login", credentials);
        dispatch({ type: "LOGIN_SUCCESS", payload: res.data });
      } catch (err) {
        setMsg({ fail: true, msg: err.response.data.message });
        dispatch({ type: "LOGIN_FAILURE", payload: err.response.data });
      }
    };


    return (

      <div className="login">
  
        {/* LOGIN FORM */}
        <form onSubmit={handleSubmit}>
          <Stack>
            
            <Typography>
            Login to
            </Typography>
  
              {/* Username or Email Address */}
              <Typography variant="h9"
                gutterBottom
                component="div"
                style={{ fontWeight: "bold",
                textAlign: "left"}}
                mt={1}>
            Username or Email Address
            </Typography>
  
          <div class="relative w-full">
              <div class="flex absolute
                      inset-y-0 left-0 items-center pl-3
                      pointer-events-none">
                  <PersonIcon class="w-5 h-5" />
              </div>
                <input type="text"
                className="loginInput"
                style={{ border: loginErr.fail ? '1px solid red' : '' }}
                // ref={userRef}
                name="email"
                id="email"
                onChange={handleChange}/>
          </div>
  
          <button
            className="loginButton"
            type="submit"
            disabled={isFetching}>
  
            {isFetching ? (
                  <CircularProgress size={15}/>
              ) : (
              <Typography
              variant="subtitle2"
              color="white">
                Login
              </Typography>)}
          </button>
  
          </Stack>
        </form>
  
        {/* LOGIN FORM ENDS */}
  
        </div>
    );  
    
  }

我的问题是如何让 INPUT 知道用户是在输入用户名还是 email 然后采取相应措施，或者有什么简单的方法可以完成这项工作？

后端Auth.js:

router.post("/login", async (req, res, next) => {
  
  try {

    if (!req.body.password) {
      return next(createError(400, "Invalid password"));
    }

    const user = await User.findOne({$or: [
      {email: req.body.email},
      {username: req.body.username}
    ]});
    if (!user) return next(createError(404, "User not found!"));

    const isPasswordCorrect = await bcrypt.compare(
      req.body.password,
      user.password
    );
    if (!isPasswordCorrect) return next(createError(400, "Wrong password!"));

    const { password, ...others } = user._doc;

    res.status(200).json(others);
  } catch (err) {
    next(err);
  }

});

Answer 1

我认为输入本身不能区分它。

对于用户名/电子邮件输入，设置单独的 onChange function 通过它您可以检查输入是有效的 email 还是用户名。

例如，您可以这样做，首先检查您的后端是否存在用户名，然后使用正则表达式检查 email 是否是有效的 email。

Answer 2

所以我在后端实现了它，我发现我不必检查输入是用户名还是 email 我所要做的就是在 User.findOne 中使用 $or 它就像魅力一样在这里是有人觉得有帮助的代码

  const user = await User.findOne({$or: [
  {email: req.body.emailOrUsername},
  {username: req.body.emailOrUsername}
]});

在前端：

  const [credentials, setCredentials] = useState({
      emailOrUsername: undefined,
      password: undefined,
    });

对于输入：

{/* Username or Email Address */}
              <Typography variant="h9"
                gutterBottom
                component="div"
                style={{ fontWeight: "bold",
                textAlign: "left"}}
                mt={1}>
            Username or Email Address
            </Typography>
  
          <div class="relative w-full">
              <div class="flex absolute
                      inset-y-0 left-0 items-center pl-3
                      pointer-events-none">
                  <PersonIcon class="w-5 h-5" />
              </div>
                <input type="text"
                className="loginInput"
                style={{ border: loginErr.fail ? '1px solid red' : '' }}
                // ref={userRef}
                name="emailOrUsername"
                id="emailOrUsername"
                onChange={handleChange}/>
          </div>