0

I have begun studying Web Development and I'm stuck at pattern or regexp because I cannot fully understand it or how do I put rules in it's syntax, can someone explain it to me?

<label for="password2">Password: </label>
<input id="password2" type="password" placeholder="password here"
pattern="[0-9a-zA-Z]{8,12}"
title="Please enter a password 8-12 alpha numeric characters" required>

In the above example I have understood the following in it's pattern:
0-9 <- You can insert numbers through 0 to 9
a-z <- You can insert lowercase letters from a to z
A-Z <- You can isert uppercase letters from A to Z
{8,12} <- Password must be at least 8 and 12 maximum characters

So far, so good.
But how do I add rules such as:
1) Please insert at least a symbol or more such as !, @, #, $
2) Input at least an uppercase letter or more
3) Input at least 3 numbers
4) Exclude these symbols such as: &, *

In W3Schools they have the following example:

<form action="/action_page.php">
Password: <input type="password" name="pw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters">
<input type="submit">
</form>

What is and what does it do:
1) (?=.\d)
2) (?=.[a-z]) <- This must be "use at least one lowercase letter", but how can you define how many lowercase letters you want?
3) (?=.*[A-Z]) <- And this is for uppercase

Also another example is from MDN
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password

<label for="ssn">SSN:</label>
<input type="password" id="ssn" inputmode="numeric" minlength="9" maxlength="12"
    pattern="(?!000)([0-6]\d{2}|7([0-6]\d|7[012]))([ -])?(?!00)\d\d\3(?!0000)\d{4}"
    required autocomplete="off">
<br>
<label for="ssn">Value:</label>
<span id="current"></span>

Which uses the following rules: (?!000)([0-6]\d{2}|7([0-6]\d|7[012]))([ -])?(?!00)\d\d\3(?!0000)\d{4}"

Can someone break it down and explain it? and is the above syntax html or something else?

I'm sorry for the long post, you don't have to answer to everything I asked. I just want to have a clear understanding. I know I may not have to use anything from the above because you can't trust any user in the front end and I may use JavaScript for the rules above.
"All users are guilty until proven innocent"

Thanks.

Marios T.
  • 11
  • It is preferred if you post separate questions instead of combining multiple questions into one. That way, questions are more likely to get complete answers, and those searching for one of your questions are more likely to find what they're looking for. – CertainPerformance Sep 20 '18 at 07:30
  • 1. Your understanding of `[0-9a-zA-Z]{8,12}` is right. The pattern attribute regex is actually wrapped with `^(?:` and `)$`, so it is `/^(?:[0-9a-zA-Z]{8,12})$/` and does what you describe. – Wiktor Stribiżew Sep 20 '18 at 07:34
  • 2. *4) Exclude these symbols such as: `&`, `*`* - these are not matched with the pattern above, but in general - `(?![^&*]*[&*])` at the start here (or, if you use `^`, right after the `^` start of string anchor). – Wiktor Stribiżew Sep 20 '18 at 07:35
  • 3. *how can you define how many lowercase letters you want* - `(?=(?:[^a-z]*[a-z]){N})` – Wiktor Stribiżew Sep 20 '18 at 07:36
  • 4. See https://regex101.com/r/J6leAC/1 – Wiktor Stribiżew Sep 20 '18 at 07:39
  • @WiktorStribiżew in more detail, in the example of (?![^&*]*[&*]) (? is used for wrapping, ! is used to exclude, ^ is used to for what to exclude and * is used for plus rule? – Marios T. Sep 20 '18 at 07:39
  • Wow many thanks!!! – Marios T. Sep 20 '18 at 07:43

0 Answers0