如何防止用户输入以数字开头的用户名，但只允许在字母字符后输入数字？

Question

我有下面这段代码，我的问题是当我想检查用户是否使用 startsWith() 函数在前面输入了一个数字时，我得到一个“TypeError: usernameField.startsWith is not a function ”。 如何防止用户输入以数字开头的用户名，但只允许在字母字符后输入数字，这样当他们将数字放在前面时，它一目了然，然后被替换为空？

import React, { Component } from "react";
import SignupForm from "./components/SignupForm";

class App extends Component {
  constructor() {
    super();
    this.state = {
      username: "",
    };

    this.changeValue = this.changeValue.bind(this);
    this.removeNumbers = this.removeNumbers.bind(this);

  }

changeValue(event) {
    this.setState({
      [event.target.name]: event.target.value,
    });
  }

removeNumbers(usernameField) {
    let numbers = /[0-9]/gi;
    if (usernameField.startsWith(numbers)) {
        usernameField.target.value = usernameField.target.value.replace(numbers, "");
    }
}

render() {
    return (
        <div className="App">            
          <SignupForm
             changeValueHandler={this.changeValue}
             usernameValue={this.state.username}
             usernameCharacterFilter={this.removeNumbers}
           />
        </div>         
    );
  }
}

export default App;

import React from "react";

export default function SignupForm(props) {
  return (
    <div className="container">
      <h1>Signup Form</h1>
      <div className="form-div">
        <form>
          <input
            name="username"
            type="text"
            placeholder="Username"
            onChange={props.changeValueHandler}
            onKeyUp = {props.usernameCharacterFilter}
            value={props.usernameValue}
          />
        </form>
      </div>
    </div>
  );
}

Answer 1

问题

1. String.prototype.startsWith 不使用正则表达式模式。
2. 未正确访问 keyUp 事件对象。在应该 usernameField.target.value.startsWith(numbers).
时在 usernameField.startsWith(numbers) 上抛出错误

解决方案

我认为 onKeyUp 回调不是必需的。您所描述的是在输入一段时间后进行检查以测试 username 状态是否以数字开头。

1. 使用 String.prototype.replace 和正则表达式 /^[0-9]*/gi。
2. 使用 debounced callback 检查 username 状态值，从 componentDidUpdate 生命周期方法调用。

代码：

function SignupForm(props) {
  return (
    <div className="container">
      <h1>Signup Form</h1>
      <div className="form-div">
        <form>
          <input
            name="username"
            type="text"
            placeholder="Username"
            onChange={props.changeValueHandler}
            value={props.usernameValue}
          />
        </form>
      </div>
    </div>
  );
}

export default class App extends Component {
  state = {
    username: ""
  };

  componentDidUpdate(prevProps, prevState) {
    if (prevState.username !== this.state.username) {
      this.removeLeadingNumbers();
    }
  }

  changeValue = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    });
  };

  removeLeadingNumbers = debounce(
    () => {
      this.setState((prevState) => ({
        username: prevState.username.replace(/^[0-9]*/gi, "")
      }));
    },
    1000,
    { maxWait: 3000 }
  );

  render() {
    return (
      <div className="App">
        <SignupForm
          changeValueHandler={this.changeValue}
          usernameValue={this.state.username}
        />
      </div>
    );
  }
}

演示