如何限制用户在反应 class 组件中的文本输入字段中输入数字或特殊字符

Question

im trying to restric user from entering numbers using regex in to my text type input. how can i achieve it,

  nameChangeHandler=(e)=>{
    const userInput={...this.state.userInput};
    const reg=/[0-9]/;
    if(reg.test(e.currentTarget.value))
    e.preventDefault();
    userInput[e.currentTarget.name]=e.currentTarget.value
    this.setState({
      userInput
    })
  }
 <input id="nameInput"  type="text" name="username" value={username} onChange={this.nameChangeHandler} />

This is what i have tried doing

Answer 1

The regex pattern to "not allow" for numbers (= check whether numbers are not in the string): /^([^0-9]*)$/

Example regex to additionally check for special characters ($ and %): /^([^0-9$%]*)$/

Assuming your current handler works, this should prevent users from typing a number and % and $:

nameChangeHandler=(e)=>{
    const reg=/^([^0-9$%]*)$/;
    if (reg.test(e.currentTarget.value)) {
      this.setState({ ...this.state.userInput, username: e.currentTarget.value })
    }
  }