具有材质UI的ReactJS动态表单验证

Question

我正在麻烦验证表单。下面给出了“我的表格”，该表格具有最小的复制能力。

我已经在表单中使用了React debug。

Material UI

我希望用户插入的值小于5时，他们会收到一条错误消息，而如果他们不插入数字，则他们还会收到另一条错误消息。

我在实施这种简单验证方面遇到了麻烦

我需要帮助，在这种情况下，如果有人可以帮助我，这将非常合适。

我已经用正则表达式编写了一个验证器，但是我不知道如何实现它来显示错误消息。

请问有人可以帮我吗？

Answer 1

我有一个类似的情况，我需要测试文本字段是否为空。我以以下方式在material-ui中进行了操作。您有错误和辅助文字，可以进行验证并显示相应的消息。

material-ui text-field validation

<TextField
    required
    id="flowName"
    name="name"
    label="Flow Name"
    variant="outlined"
    value={name}
    error={name !== ""}
    helperText={name !== "" ? "Required!" : " "}
/>

并检查phoneNumber长度更改

error={values.phone.length < 5}
helperText={values.phone.length < 5 ? "Phone must be longer than five characters!" : " "}