所以，这是我的输入字段：
<input type={type} name={name} />
我怎样才能只允许英文字母？
这是RegEx，我相信我应该使用：/[A-Za-z]/ig
https://regex101.com/r/upWFNy/1
我假设onChange()事件应被用于该用的组合setState()和event.target.value。
谢谢。
附注。我需要在打字时使用这个。
如何在输入字段中只允许英文字母？
IT技术
javascript
html
reactjs
forms
validation
2021-05-09 17:43:10
4个回答
我会试试这个onChange功能：
onChange={(e) => {
let value = e.target.value
value = value.replace(/[^A-Za-z]/ig, '')
this.setState({
value,
})
}}
查看代码笔：https ://codepen.io/bozdoz/pen/vzJgQB
这个想法是将您的正则表达式匹配器反转^并替换为所有非-Az 字符''
您可以在输入中使用模式属性。
<input pattern = “[A-Za-z]”>
这应该可以解决问题，应排除除 ascii 0-127 之外的所有字符，这些字符是英文字符，o 到 127 还为您提供空格、+、-、/ 和有用的标点符号，如果您只想要字母，则 [^Az]应该可以解决问题，如果您需要非空格字符，那么 [^Az\s] 应该可以工作：
document.getElementById('english').addEventListener('input', function(){
this.value = this.value.replace(/[^\x00-\x7F]+/ig, '');
});
react方式：
class InputEnglish extends React.Component {
constructor(){
super();
this.state = {value: ''};
this.onChange = this.onChange.bind(this);
}
onChange(e) {
let val = e.target.value.replace(/[^\x00-\x7F]/ig, '');
this.setState(state => ({ value: val }));
}
render() {
return (<input
value={this.state.value}
onChange={this.onChange}
/>);
}
}
您可以使用/[A-Za-z]/正则表达式和input每次元素值更改时触发的事件处理程序。像下面这样：
const regex = /[A-Za-z]/;
function validate(e) {
const chars = e.target.value.split('');
const char = chars.pop();
if (!regex.test(char)) {
e.target.value = chars.join('');
console.log(`${char} is not a valid character.`);
}
}
document.querySelector('#myInput').addEventListener('input', validate);<label for="myInput">Type some text:</label>
<input id="myInput" type="text" />