logo标签列表

如何在输入框中仅允许输入英文字母？

javascripthtmlreactjsformsvalidation
5

所以，这是我的输入框：

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

如何只允许输入英文字母？
我认为应该使用以下正则表达式：/[A-Za-z]/ig。
参考链接：https://regex101.com/r/upWFNy/1 我假设应该使用onChange()事件，并结合setState()和event.target.value来实现。
谢谢。
PS. 我需要在输入时实现这一功能。
这已经在这里概述了：https://dev59.com/u2w05IYBdhLWcg3wmC6_ - Kevin Lewis
@KevinLewis，您好。能否更新您的回答，但请勿包含数字？谢谢。 - user8608046
英语是一种有趣的语言，因为它使用了许多不在其“字母表”中的字母。所以，你确定要这样做吗？如果是这样，也许你应该将其重新表述为大写和小写的基本拉丁字母。 - Tom Blodget
注意：您无法告诉Web浏览器允许或不允许哪些字符。但是，您可以使用JavaScript或HTML模式，在各种事件发生时触发以删除不需要的字符。这就是您将在答案中看到的内容。 - Tom Blodget
7个回答
16

我建议尝试使用这个 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

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

是的，但对我来说问题在于value始终为空。当我输入文本时，它会动态填充。这就是为什么在value={this.state.value}处失败的原因。@bozdoz - user8608046
对于jQuery，请使用$(this).val($(this).val().replace(/[^A-Za-z]/ig, ''))。 - George Ogden
7
您可以在输入框中使用“pattern”属性。
    <input pattern = “[A-Za-z]”>
4
您可以尝试使用正则表达式解决此问题。只需使用正则表达式检查输入的字符是否为字母。如果不是，则不更新状态值。
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;

重要的部分是正则表达式。你可以通过改变正则表达式来改变验证类型。
在此链接中，您可以访问React Input Only Letters的代码示例：https://codesandbox.io/s/react-input-only-letters-qyf2j。
3

以下翻译可能对您有所帮助，只留下html标签，请按照要求返回结果。此代码将排除除英文字符以外的所有字符（ascii 0-127），0至127还包括空格、+、-、/和标点符号，如果您只需要字母，则应使用[^A-z]，如果需要非空格字符，则应使用[^A-z\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}
    />);
  }
}

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

你好，你能用React的方式写一下这个吗？ - user8608046
@JohnSam 在 React 中不需要做太多，但这应该可以工作。 - Harry Chilinguerian
@JohnSam，请看一下帖子中的CodePen，它在那里可以运行。如果还是不行，请告诉我。:) - Harry Chilinguerian
是的，但对我来说问题在于“value”始终为空。它会随着我输入文本而动态填充。这就是为什么在获取“value”时失败的原因。 - user8608046
2
您可以使用正则表达式/[A-Za-z]/和一个事件处理程序，每当元素的值更改时就会触发。像下面这样： 

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

如果我在输入的中间键入、粘贴或拖放无效字符，这将无法正常工作。请查看此链接：https://stackoverflow.com/questions/51065370/how-to-enable-input-for-additional-keys/64085268#64085268 - Danziger
@Danziger 我在Chrome v85上尝试粘贴一个非字母字符的示例，它似乎按照我的预期工作。你有在特定浏览器中无法正常工作的示例吗？ - Tom O.
如果你把它粘贴到末尾，它就可以正常工作。试着把光标移到左边，然后再粘贴。我也在使用Chrome 85。 - Danziger
0

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

1
您的回答可以通过添加更多支持信息来改进。请[编辑]以添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是否正确。您可以在帮助中心找到有关如何编写好答案的更多信息。 - Community
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">
请在您的答案中提供一些解释。 - Lexib0y
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接