如何在输入字段中仅允许英文字母?

时间:2018-09-05 14:10:05

标签: javascript html reactjs forms validation

所以,这是我的输入字段:

<input type={type} name={name} />

我怎么只允许英文字母?

这是RegEx,我相信我应该使用:/[A-Za-z]/ig

https://regex101.com/r/upWFNy/1

我假设应该将onChange()setState()结合使用event.target.value事件。

谢谢。

PS。我需要输入WHILE。

6 个答案:

答案 0 :(得分:4)

您可以在输入中使用pattern属性。

    <input pattern = “[A-Za-z]”>

答案 1 :(得分:2)

这应该可以解决问题,除了ascii 0-127以外的所有英文字符都应该排除在外,o到127还会为您提供空格,+,-,/和标点符号,如果只需要字母,那么[ ^ Az]应该可以解决问题,如果您需要非空格字符,则[^ Az \ s]应该可以:

document.getElementById('english').addEventListener('input', function(){
  this.value = this.value.replace(/[^\x00-\x7F]+/ig, '');
});

反应方式:

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}
    />);
  }
}

https://codepen.io/anon/pen/QVMgrd

答案 2 :(得分:2)

我会尝试使用此onChange函数:

onChange={(e) => {
  let value = e.target.value

  value = value.replace(/[^A-Za-z]/ig, '')

  this.setState({
    value,
  })
}}

请参阅codepen:https://codepen.io/bozdoz/pen/vzJgQB

这个想法是用^反转您的正则表达式匹配器,并用''

替换所有 non -A-z字符

答案 3 :(得分:1)

您可以在元素上使用/[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" />

答案 4 :(得分:0)

我不能这样做,因为我没有写其他答案,所以不允许数字,但是您可以转到keycode.info并输入数字,然后从选择器中删除它们。网站将返回您按下的任何键盘项目的键代码

答案 5 :(得分:0)

  alphacheck(e: any) {
    const regex = /[A-Za-z]/;
    const chars = e.target.value.split('');
    const char = chars.pop();
    console.log(char);
    if (!regex.test(char)) {
      e.target.value = chars.join('');
      alert("Please enter only alphabets");
      e.preventDefault();
      return false;
     
    }
    else {
      return true;
    }
  }


<input placeholder="Full Name" formControlName="fullName"  pattern="[a-zA-Z]*"  (keypress)="alphacheck($event)"  name="fullname" value="" type="text" class="form-control">