正则表达式模式在输入 Reactjs 中不起作用

Question

pattern="[a-zA-Z ]*"

我试图将输入限制为只有字母，不允许使用数字或符号

但是给定的代码不起作用

<input
name="cardName"
type="text"
required 
pattern="[a-zA-Z ]*"
defaultValue={kardName}
/>

我也尝试过使用onChange方法，但它不太适用

任何帮助都将高度重视

Answer 1

pattern属性指定了一个正则表达式，在表单提交时将根据该正则表达式检查元素的值。

您可以从下面的代码片段中看到，如果您点击submit，则会检查模式，并且它确实有效。

<form>
<input
name="cardName"
type="text"
required 
pattern="[a-zA-Z ]*"
/>
<input type="submit" />
</form>

如果你想阻止用户插入某些字符，pattern属性对你没有帮助。

您可以做的是检查onKeyDown函数中的字符，并防止在其中插入。类似这样的东西：

const onKeyDown = (event) => {
if (!event.key.match(/[A-Za-z ]/)) {
event.preventDefault()
}
...
<input
name="cardName"
type="text"
required
onKeyDown={onKeyDown}
/>