Material-UI：限制 TextField 中的特定特殊字符

Question

如何验证或不允许在 Material-UI TextField 上输入以下特殊字符 [^%<>\\$'"]。

以下是我现有的代码。

const useStyles = makeStyles((theme) => ({
textField: {
    marginRight: theme.spacing(1),
    width: 500,
},
FormLabelHeader:{
    fontSize: '20px',
    width: 500,
},
})
enter code here
const txtNameChange = (e) =>
{
    setpersonDetails(prevState =>({
        ...prevState,
        'NAME' : e.target.value
    }))
}

.....
<FormControl>
   <FormLabel className = {style.FormLabelHeader}>Add</FormLabel><br/>
   <TextField className = {style.textField} label='NAME' name = 'NAME' variant='outlined' autoComplete='off' onChange={txtNameChange}/><br />
</FormControl>

Answer 1

如何进行验证

您可以通过设置TextField 的helperText 和error 属性在验证值后提供错误消息：

const [name, setName] = useState("");
const [error, setError] = useState("");
const onChange = (e) => {
  const newValue = e.target.value;

  if (!newValue.match(/[%<>\\$'"]/)) {
    setError("");
  } else {
    setError("Unforbidden character: %<>$'\"");
  }
  setName(newValue);
};

return (
  <TextField
    value={name}
    onChange={onChange}
    helperText={error} // error message
    error={!!error} // set to true to change the border/helperText color to red
  />
);

或不允许进入

由于您已经在代码中控制了TextField 的值，因此如果验证失败，请不要更新状态：

const onChange = (e) => {
  const newValue = e.target.value;

  if (!newValue.match(/[%<>\\$'"]/)) {
    setError("");
    setName(newValue); // only set when successful
  } else {
    setError("Unforbidden character: %<>$'\"");
  }
};