MUI 输入字段只接受字母、数字和破折号？

Question

如何限制 MUI 输入字段仅接受字母、数字和破折号？因此空格和符号 (*&^%$#@!,.<>{}[]) 将被排除。

更具体地说，我想允许任何不会导致 URL 崩溃的内容，即https://mywebsite.com/user- generated-string-here123 。

谢谢！

Answer 1

您可以传递一个处理程序onKeyDown并检查按下的键。如果按下的键不是字母、数字或破折号，则排除。

const ALPHA_NUMERIC_DASH_REGEX = /^[a-zA-Z0-9-]+$/;

<TextField
  onKeyDown={(event) => {
    if (!ALPHA_NUMERIC_DASH_REGEX.test(event.key)) {
      event.preventDefault();
    }
  }}
/>

或者，对于受控组件，您可以在onChange处理程序中进行验证并根据值更新状态。这还将验证粘贴到文本字段中的值，并在条件不满足时忽略。

const [value, setValue] = useState('');

<TextField
  value={value}
  onChange={(event) => {
    const value = event.target.value;
    if (value !== "" && !ALPHA_NUMERIC_DASH_REGEX.test(value)) {
      return;
    }
    setValue(value);
  }}
/>

这是codesandbox 中工作演示的链接。