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

【问题标题】：Regex pattern for username in react form反应形式的用户名的正则表达式模式
【发布时间】：2018-12-14 20:26:34
【问题描述】：

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

我有一个设置状态，首先设置值，然后我将回调传递给 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，也应该检查删除，然后处理程序会再次验证？

编辑：

在 cmets 之后，说这是我尝试的问题是正则表达式模式，使用一些控制台日志来查找当前状态的值，当它被验证时

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，因为它在更改值之前提供了用户名

【问题讨论】：

您的正则表达式格式不符合您的目的 - 它只传递了两个字符：regex101.com
问题出在你的正则表达式上。您的正则表达式具有三个元素。你的第一个字符必须是一个字母或一个数字，你可以有一个或多个。您的下一个捕获范围更广，但您可以拥有其中的零个。最终捕获必须是一个或多个字母/数字。因此，任何由字母和/或数字组成的两位数密码都会通过此正则表达式。你想强制什么模式？
我在这里重新创建了您的帖子：codesandbox.io/s/llzlxoj7p7 尝试创建更严格的正则表达式，我怀疑它会解决您的问题
您的onChange 代码不正确。查看@lux 发布的沙箱，了解如何正确编写。
问题是，我将另一个函数作为回调传递给 setState，因此该函数不会接收到更新的状态。感谢 lux 的解决方案！

标签： reactjs

【解决方案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] 的程度，即所有单词和数字字符。

【讨论】：