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>

- Rymrk

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("Forbidden 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("Forbidden character: %<>$'\"");
  }
};

- NearHuscarl

---

嗨@NearHuscarl，谢谢，现在它正在工作。如果我想添加其他特殊字符，我应该放在哪里？例如[ ]。我尝试放置它，但只有[被验证。谢谢。 - Rymrk

[ 和 ] 是正则表达式中的特殊字符。尝试转义它：\[ 和 \] @Rymrk - NearHuscarl

您可以检查字符串值的长度并查看它是否满足约束条件：if (newValue.length > 0 || newValue.length < n)，例如@Rymrk。 - NearHuscarl

嗨@NearHuscarl，关于这个问题。当涉及到编辑时，我遇到了新的问题。我应该编辑这篇文章还是发布另一个问题？你能再次帮我吗？谢谢。 - Rymrk

嗨 @NearHuscarl，你能帮我解决这个问题吗？https://stackoverflow.com/questions/66866051/material-ui-unable-to-delete-data-in-textfield-during-update-with-character-and - Rymrk