我正在为验证一个表格而烦恼。我的表单如下,这是最小的重现能力。
我已经使用React Material UI
的表单。
import React from 'react';
import TextField from '@material-ui/core/TextField';
import { FormGroup } from '@material-ui/core';
function App(props) {
const validator = {
number: {
rules: [
{
test: /([\d]+)/,
message: 'numaric must contain only numeric characters',
},
{
test: (value) => {
return value.length > 5;
},
message: 'phone must be longer than five characters',
},
],
errors: [],
valid: false,
state: '',
},
};
const [values, setValues] = React.useState({
ssn: '',
phone: '',
email: '',
country: '',
});
const handleChange = name => event => {
setValues({ ...values, [name]: event.target.value });
};
return (
<React.Fragment>
<div>
<FormGroup autoComplete="on">
<TextField
id=""
label="Phone"
value={values.phone}
onChange={handleChange('phone')}
type="number"
validators={validator}
name='phone'
/>
</FormGroup>
</div>
</React.Fragment>
);
}
export default App;
我希望如果用户插入的数值小于5,他们将得到一个错误信息,如果他们没有插入数字,他们将得到另一个错误信息。
我费尽心思实现了这个简单的验证。
我需要帮助,如果有人能在这种情况下帮助我,那将是非常合适的。
我已经用regex写了一个验证器,但我不知道如何实现这个验证器来显示错误信息。
谁能帮助我,请问?
我有一个类似的情况下,我需要测试如果文本字段是空的。我做了下面的方式在material-ui。你有错误和helpertext,可以做验证并显示各自的消息。
<TextField
required
id="flowName"
name="name"
label="Flow Name"
variant="outlined"
value={name}
error={name !== ""}
helperText={name !== "" ? "Required!" : " "}
/>
并检查电话号码长度的变化
error={values.phone.length < 5}
helperText={values.phone.length < 5 ? "Phone must be longer than five characters!" : " "}