Use RegEx as an input pattern to validate password - html

Question

I have a password field and I need to check if it has at least 8 characters and if it has the following characters:
! # # $ % ^ & *
I tried to do it using a pattern, and it's not working as expected:
<div class="col-sm-6 form-group">
<input type="password" class="form-control" id="Clave" name="txtClave"
pattern='/[!##$%^&*(),.?":{}|<>]/g.{8,}'
title="Debe contener uno de los siguientes caracteres: ! # # $ % ^ & *, y al menos 8 o más caracteres" required>
</div>

Answer 1

Try Regex: ^(?=.*[!##$%^&*(),.?":{}|<>]).{8,}$
Demo

Answer 2

The best mechanism for combining multiple tests in a single regex is a lookahead. An ordinary regex moves through a string looking for a match, which means that when it finds a match it is no longer at the beginning of the string. A lookahead looks for a match without actually moving (hence the name "lookahead"). The basic format is (?=<regex>) and you can combine as many as you like into a single pattern.
In this case, you have two conditions, so you'll want to combine two lookaheads. We've already seen the first -- .{8,} -- but in a lookahead you want a little more than that: you need to ensure that the regex matches the entire string. So start your pattern with \A, the anchor matching the beginning of the string, and end the lookahead with \z, the anchor matching the end of the string. Put it together and the first part of your pattern is \A(?=.{8,}\z). (This precaution is unnecessary in your specific case, because you'll accept passwords with more than eight characters, but it's still good practice.)
The second condition, matching any of eight specific characters, starts with the class [!##$%^&*]. But in a lookahead that starts at the beginning of the string and never moves, that class would match only the first character. You need a regex that matches anywhere in the string. An easy way to do this is .*[!##$%^&*], which matches zero or more characters followed by one of your special characters. In a lookahead, that would be (?=.*[!##$%^&*]). "Easy" is not always best, however: the .* construct is comparatively inefficient, because it always checks the entire string and then has to backtrack to the beginning before continuing, which can be computationally expensive.
A much more efficient way to do something like this is [^!##$%^&*]*[!##$%^&*]. This matches zero or more characters that are not in your special set, followed by exactly one character that is. (A caret (^) as the first character in a bracketed class means to negate the class; a caret anywhere else in the class is just a literal caret as a member of the class.) It's more efficient because it checks only the characters before its position in the string, and can stop immediately once it finds a match. Putting that in a lookahead gives us (?=[^!##$%^&*]*[!##$%^&*]).
Now you can simply combine the two lookaheads into your "pattern", like so:
pattern='\A(?=.{8,}\z)(?=[^!##$%^&*]*[!##$%^&*])'
That should match any password with eight or more characters, at least one of which is one of your eight special characters: ! # # $ % ^ & *