如何在输入字段中只允许英文字母？

Question

所以，这是我的输入字段：

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

我怎样才能只允许英文字母？

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

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

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

谢谢。

附言。我需要在打字时进行此操作。

Answer 1

我会试试这个onChange 函数：

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

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

  this.setState({
    value,
  })
}}

查看代码：https://codepen.io/bozdoz/pen/vzJgQB

这个想法是用^ 反转你的正则表达式匹配器，并用'' 替换所有非-A-z 字符

Answer 2

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

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

Answer 3

这应该可以解决问题，除了 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

Answer 4

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

Answer 5

您可以尝试使用 Regx 来解决此问题。只需使用 regx 检查输入的字符是否为字母。如果不是，则不要更新状态值。

import React from "react";

class InputValidationDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      type: "text",
      name: "username",
      value: ""
    };
  }
  onChange = (e) => {
    const re = /^[A-Za-z]+$/;
    if (e.target.value === "" || re.test(e.target.value))
      this.setState({ value: e.target.value });
  };

  render() {
    const { type, name, value } = this.state;
    return (
      <div>
        <input type={type} name={name} value={value} onChange={this.onChange} />
      </div>
    );
  }
}
export default InputValidationDemo;

https://codesandbox.io/s/react-input-only-letters-qyf2j

重要的部分是正则表达式。你可以改变你的 通过更改正则表达式来验证类型。

Answer 6

  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">