ReactJS -不能仅限制用户输入字母
ReactJS -不能仅限制用户输入字母
提问于 2018-10-17 02:09:45
我试图限制用户只输入字母，但由于某种原因，它不起作用。我对ReactJS非常陌生，所以也许我的问题就在这里。到目前为止，这就是我所得到的：
<input type="text" pattern="[a-zA-Z]*" placeholder="Add Skill" onChange={this.updateField} />在这种情况下，type=“文本”和模式似乎不起作用。
提前感谢！
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-10-17 02:20:22
pattern属性用于在提交时对照输入值进行检查。
参考文献：pattern.asp
若要限制用户仅输入字母，可以使用onKeyPress
<input
type="text"
onKeyPress={event => (event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122)}
placeholder="Add Skill"
onChange={this.updateField}
/>这是ASCII表：http://www.asciitable.com/
更新
Stack Overflow用户
发布于 2021-08-16 17:18:32
您可以尝试使用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;Stack Overflow用户
发布于 2021-08-16 17:22:09
您可以使用Yup/Joi或其他验证器，如果要使用它们几次，并且在正则表达式已经存在并进行了测试的情况下，可以对该任务进行更多的验证。https://www.npmjs.com/package/yup https://www.npmjs.com/package/joi
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52846347
复制相关文章
相似问题
腾讯云开发者
