问题描述
我有一个登录页面（下面的代码），要求输入用户名，我尝试添加检查以确保长度为7（数据库中任何用户的长度），并且仅输入数字并不是字母。但是，我现在想打电话给我的Web api，以检查输入的用户名是否有效，但是我不确定如何执行此操作，有人可以帮忙吗？
在我的API中，我有一个get all usernamers方法和一个get user /方法
import React,{ useState } from "react";
import { useHistory } from "react-router-dom";
import "./Login.css";
export default function LogIn() {
const history = useHistory();
const [value,setValue] = useState("");
const regexp = /^[0-9\b]+$/;
function handleChange(e) {
setValue(e.target.value);
}
function handleSubmit(e) {
e.preventDefault();
if (!regexp.test(value)) {
alert("Username should not contain letters,please re-enter");
return;
}
return history.replace("/UserWelcome",value);
}
return (
<div className="Login">
<form onSubmit={handleSubmit}>
<h1>Log into our Messaging Service</h1>
<label>
Username:
<input
type="text"
name="UserId"
value={value}
onChange={handleChange}
required
maxLength="7"
minLength="7"
/>
</label>
<button>Log In</button>
</form>
</div>
);
}
