使用正则表达式的表单验证不起作用TextField MUI React

Question

我正试图在inputProps中添加一个正则表达式模式，用于验证Textfield和required，但两者都不起作用，单击下一步时，还会输入空的或错误的输入。

<TextField
id="outlined-basic"
name="s_firstName"
label="First Name"
variant="outlined"
defaultValue={user.s_firstName}
onChange={handleChange} 

inputProps={{pattern: "[a-z]"}
required />

请你帮忙，验证不起作用是怎么回事？

Answer 1

您的代码似乎很好，如果您提交表单，required就可以工作了。它显示了标签上需要标记的字段。

在材料ui中，

required bool
如果为true，则会根据需要显示标签，并且需要输入元素。

您在输入时会注意到弹出的警告。

为了验证，您可以使用onChange编写自己的函数。

const handleValidation = (e) => {
const reg = new RegExp("[a-z]");
setValid(reg.test(e.target.value));
setValue(e.target.value);
};

有了<Textfield>的error道具，你可以做这样的事情，

<TextField
id="outlined-basic"
name="s_firstName"
label="First Name"
variant="outlined"
value={value}
onChange={(e) => handleValidation(e)}
error={!valid}
required={true}
/>

查看此演示，了解两种场景的代码。

Answer 2

如果您想显示错误消息，请使用"helperText"；

<TextField
error={value=== ""}
helperText={value=== "" ? 'Please enter a value!' : ' '}
>