如何在材料ui TextField中的reactjs错误验证?

Question

我在我的react应用程序中使用材料ui TextField。我需要知道如何使用错误和辅助文本验证我下面的代码携带电子邮件和密码?请通读下面给出的代码，给我一个合适的解决方案。

function LoginPage() {
const handleSubmit1 = (event) => {
event.preventDefault();
const data = new FormData(event.currentTarget);
console.log({
email: data.get("email"),
password: data.get("password"),
remember: data.get("remember"),
});
};
return (
<Box
component="form"
onSubmit={handleSubmit1}
noValidate
autoComplete="off"
sx={{ mt: 1 }}
>
<FormControl sx={{ width: "60ch" }}>
<CssTextField
type="email"
id="email"
name="email"
label="Username or email"
variant="standard"
fullWidth
required
autoComplete="off"
/>
<CssTextField
name="password"
label="Password"
type="password"
id="password"
autoComplete="off"
variant="standard"
fullWidth
Validators
required
/>
</FormControl>
<Stack direction="row" spacing={2}>
<Button variant="contained" size="medium">
LOGIN
</Button>
</Stack>
</Box>
);
}

Answer 1

我不太清楚你们要解决的具体是什么问题，能否请你再详细说明一下?

我假设您想以某种方式验证输入并根据验证状态显示错误消息，或者只是简单地将登录请求发送到您的身份验证服务。如果我的假设是正确的，您可能希望利用现有的库，它们将为您处理这些问题——其中之一是:mui-validate它将在向服务器发送任何请求之前处理客户端验证。

或者您真的想要显示异步服务器响应的结果吗?

在更好地了解您的实际挑战之后，我相信我们可以为您提供一个很好的代码示例。

Answer 2

试试这个https://mui.com/material-ui/api/text-field/这里有一个MUI文本字段支持的所有api的列表，如果您仍然无法捕获您的场景，那么请尝试此https://mui.com/material-ui/react-text-field/这里有所有可能的文本字段场景的演示，以及错误的场景，尝试先探索库文档，因为它将增加您的知识并更好地理解MUI包。我希望用这个你可以自己处理你的案子。