使用正则验证用户名和密码验证
#javascript #教程 #regex

当我首次学习Web开发时,始终如一地避免理解的工具之一就是Regex。自从我获得第一份工程工作以来,大约已经一年半了,直到最近,这种了解水平一直存在。

我以前没有真正需要 以前学习正则是正则是一个,但是最近的工作项目(移动应用程序,react本机)需要在用户注册页面上的用户名和密码上的前端验证。用例非常复杂,需要学习比我所知道的更多,但很容易实现。到最后,在教程中谈论这是一个很好的例子,所以我们在这里!

问题

用户名的字符数量最少,需要至少一个数字,依此类推。密码通常会执行相同的操作,通常会增加密码强度的评估。

在这里我们的示例,我们希望以下内容为真:

  • 用户名:6至16个字符,仅字母数字
  • 有效密码:在8到32个字符之间,至少一个字母和一个数字
  • 强密码:有效,加上大写和小写字母和特殊字符的组合

解决方案

A部分:我们需要的正则

用户名

虽然在这里有些接触到正则是有用的,但以下解释旨在使任何人都了解足够清晰。

让我们从用户名开始。我们需要它仅包含字母和数字,并且必须在6到16个字符之间。这将解决问题:

/^[0-9A-Za-z]{6,16}$/

让我们将此语句分为其各个部分。

  • /.../ wrap/tee the Regex语句
  • ^表示字符串的开始,而$表示结束。基本上,这确保整个字符串遵循我们的规则,而不仅仅是字符串的子集。
  • [...]指示一组特定的有效字符,否则称为字符类; 0-9允许数字,A-Z允许大写字母,a-z允许小写。还有其他指标,您可以在Regex文档中找到一个完整的列表。
  • {6,16}表示允许的字符数。如果您只是使用{6},则测试的时间为6,而{6,}测试的长度最小。

密码

当我们继续测试有效密码时,需求会改变。现在,我们需要至少有一个不同类型的字符的,而不是有限。这要求我们为每个检查进行特定的检查,看起来像:

/^(?=.*?[0-9])(?=.*?[A-Za-z]).{8,32}$/

让我们在这里分解新符号。

  • (...)捕获组。您可以使用它们来捕获特定订单中的特定字符。
  • ?=正面的lookahead 。搜索从以下等级中的位置向右移动字符串,您可以在。
  • .表示任何字符是可能的,而*表示其中的“零或更多”。
  • ?=*?中的额外问号使搜索懒惰,这实际上意味着“停止在第一次满足此要求时停止照顾”。

翻译成简单的英语,我们的语句^(?=.*?[0-9])的第一部分意思

添加(?=.*?[A-Za-z])意味着对任何字母或“从字符串的开头,找到一个在任何字符之前或更多字符之前”的字母。这使我们能够在不考虑其在字符串中发生的位置的总组中确认指定的字符的存在。

我们声明.{8,32}$的最后一部分是基于我们对.使用的理解。我们不想限制允许使用实际密码的哪些字符。相比之下,如果仅限于字母和数字,则使用[0-9A-Za-z]{8,32}$

除了有效的密码要求外,强密码还需要至少一个大写字母,至少一个小写字母和至少一个特殊字符。我们可以在同一正则陈述上构建:

// valid, but not strong
/^(?=.*?[0-9])(?=.*?[A-Za-z]).{8,32}$/
// strong
/^(?=.*?[0-9])(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[^0-9A-Za-z]).{8,32}$/

这里还有一个新的含义。首先翻译为英语将清楚地表明:

  • 找到一个号码,(?=.*?[0-9])
  • 一个大写字母,(?=.*?[A-Z])
  • 一个小写字母,(?=.*?[a-z])
  • 和一个不是字母数字(?=.*?[^0-9A-Za-z])的角色
  • 在带有8到32个字符之间的任何字符的字符串中

在字符类的开头使用时,^表示“不是”,或者不包括所有内容。对集合的基本理解在这里有帮助。一个简单的示例是[^B],它的意思是“除B'以外的任何字符。

B部分:测试有效输入

JavaScript Regexp类具有一种非常方便的方法,称为test(),可用于针对指定的REGEX语句测试字符串。例如,

const validUsername = /^[0-9A-Za-z]{6,16}$/;

console.log(validUsername.test('username')) // valid
// prints true
console.log(validUsername.test('test1')) // too short
// prints false
console.log(validUsername.test('@testing1')) // invalid character
// prints false

您可以使用密码执行相同的操作,如我在下面嵌入的嵌入的本金中所示。选择“显示代码”以查看您必须使用的功能,然后在要打开环境并进行运行自己的测试时点击运行。

包起来

我的用例(前端验证)需要通过将其传递到测试中来捕获实时用户输入和测试,但是那里有无数的其他应用程序。

当我学习学习时,stackoverflow对我来说可能是最有用的工具。可以在这里找到一个很好的集体参考:StackOverflow Regex FAQ

我个人发现,通过应用程序的镜头学习正则是更容易的事情,希望您也发现这也很有帮助。让我在评论中知道您的想法,或者您是否想添加任何内容!