只接受字母、数字和破折号的 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);
  }}
/>

这是 link 到 working demo in codesandbox。

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

MUI Input field that only accepts letters, numbers, and dashes?

forms

input

typescript

reactjs

material-ui