反应形式的用户名正则表达式模式

Question

我为用户名和密码制作了一个反应表单，并有一个正则表达式表单来验证它们。

我有一个设置状态，首先设置值，然后我将回调传递给setState，然后验证用户名是否正确。

onChange={(e) => this.setState({username: e.target.value}, this.usernameValidator(this.state.username))}

我使用 setState 回调，因为我知道每次更改时都会调用它，我不确定是否应该单独调用该方法？

这是我的经纪人

  usernameValidator = (username) =>{
var usernameRegex = /^[a-zA-Z0-9]+([a-zA-Z0-9](_|-| )[a-zA-Z0-9])*[a-zA-Z0-9]+$/;
if(usernameRegex.test(username)){
  this.setState({
    isUsernameCorrect: true
  })
}else{
  this.setState({
    isUsernameCorrect: false
  })
}
  console.log(this.state.isUsernameCorrect)
}

我的问题是，每当用户键入例如 5 个字符（正则表达式模式可以通过），然后删除任意数量的字符（达到不可接受的数量）时，正则表达式模式仍然会通过。

怎么会发生这种情况，我的意思是 onChange，也应该检查删除，然后处理程序会再次验证？

编辑：

在评论后，说这是我尝试使用一些控制台日志的正则表达式模式的问题，以在验证时找到当前状态的值

usernameValidator = (username) =>{
var usernameRegex = /^[a-zA-Z0-9]+([a-zA-Z0-9](_|-| )[a-zA-Z0-9])*[a-zA-Z0-9]+$/;
if(usernameRegex.test(username)){
  this.setState({
    isUsernameCorrect: true
  }, console.log('correct'))
}else if(!usernameRegex.test(username)){
  this.setState({
    isUsernameCorrect: false
  }, console.log('not correct'))
}
  console.log(this.state.isUsernameCorrect)
  console.log(username)
}

它总是在键入下一个键之前记录用户名，例如，如果给定的用户名是

DDD

传入的值将是

DD

因为它在值更改之前给出了用户名

Answer 1

尝试调整

setState

之后回调的调用方式。目前，它是立即调用的，而不是作为适当的回调调用；后者保证在

setState

更新

state

:

之后被调用

当前

onChange(e) {
  this.setState({
    username: e.target.value
    }, 
    this.usernameValidator(this.state.username)
  )
}

建议（https://codesandbox.io/s/llzlxoj7p7）

  onChange(e) {
    this.setState(
      {
        username: e.target.value
      },
      () => this.usernameValidator(this.state.username)
    );
  }

还值得对正则表达式进行第二次检查，以确保它完全按照您的预期进行。 https://regex101.com/ 是一个很好的资源。它还有一个很棒的备忘单，可将

[a-zA-Z0-9]

的复杂性降低为

[\w\d]

之类的东西，即所有单词和数字字符。

Answer 2

Arunkumar 是一个非常好的男孩，比任何东西都有价值 jkjscjdnbkjdfghjjsxsnib cjnddcauieucuiccj oicjoijeuuiiuicnjjnjqncjncjjncjn