DEV Community

Abiria
Abiria

Posted on • Originally published at gist.github.com

Verify password with a single regex

Probably, you've ever encountered some circumstances to check a user's input, such as password, before submitting it to the server.

we usually write verbose code to check complex rules, such as there must be at least one special character etc.

is there any way to achieve this with a single line of code?

the answer is, yes.

Let's make the problem clear

There are many special rules for password security, but for now, we will focus on only the below rules.

  1. password must contain at least one number
  2. password must contain at least one small character
  3. password must contain at least one capital character
  4. password must contain at least one special character
  5. password must be longer than 8 characters

to be more precise, I will use only !, @, and # as 'special characters' in this case since the regex part would be harder to read if it contains too many special characters and escapes.

but adding more special characters would be not too hard after understanding the basic idea.

Let's have some try

First, let's start from rule 5. we need to check given string has consisted of more than 8 of any character.

/^.{8,}$/
Enter fullscreen mode Exit fullscreen mode

what we need is, however, not just any character. we can apply more conditions by using the character class.

/^[\da-zA-Z!@#]{8,}$/
Enter fullscreen mode Exit fullscreen mode

this pattern will match strings that consisted of more than 8 numbers or upper or lower characters or special characters.

so far it looks like following our rules well, there is a little fault.

it does not guarantee that there is at least one character from each category.

/^[\da-zA-Z!@#]{8,}$/.test("12345678") // true
Enter fullscreen mode Exit fullscreen mode

you may find it is hard to solve.

fortunately, we can do it with a single regex!

Positive lookahead

?= is a positive lookahead syntax, meaning the matched pattern is followed by what is inside the (?=) parentheses, which is not captured itself.

The below example will capture only protocol type, excluding the :// part.

'http://example.com'.match(/\w+(?=:\/\/)/)[0] // 'http'
Enter fullscreen mode Exit fullscreen mode

it is also a zero-width assertion, which means you can apply additional conditions to the following pattern.

for example, a valid javascript identifier can contain numbers, but shouldn't start with numbers. (real condition is more complicated than this, but we'll ignore other rules now for simplification)

now we can simply write a regex that indicates whether the given identifier is valid or not.

['abc', 'var_name', 'x', '123hello', '$', 'foo123']
    .filter(_ => /^(?=\D)[$\w]+$/.test(_))
// [ 'abc', 'var_name', 'x', '$', 'foo123' ]
// '123hello' was invaild.
Enter fullscreen mode Exit fullscreen mode

of course, we can write it like this, but it is too verbose than the first one.

/^[$_a-zA-Z][$\w]*$/
Enter fullscreen mode Exit fullscreen mode

So how can we assert that it contains at least one character?

Let's proceed step by step.

(?=x) will match if the string exactly starts with x.

but we need to know whether there is x or not somewhere not only in the first.

another thing we can come up with is matching with .* for other characters.

for example, /(?=.*\d)\w+/ will match any string that contains at least one number.

well, now we can apply this for our original purpose.

/^(?=.*\d)[a-z\d]+$/
Enter fullscreen mode Exit fullscreen mode

this one will match against any password which contains at least one number, consisting of lowercase characters or numbers as well.

and we can add conditions more and more, our final version will look like this:

/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#])[\da-zA-Z!@#]{8,}$/
Enter fullscreen mode Exit fullscreen mode

take a slow look at the above regex. you can find that just the same pattern is repeated. then you will finally understand the idea.

this is a little bit weird at first, but a useful trick that you should know.

hope this was helpful for those who have difficulty with regex, and keep happy coding! 😎

Top comments (0)