3

Regular expression: ((?=.*\d)(?=.*[A-Z]))

Input string: qwer1Q

The input string above pass the validation if you check it in regex101

However, if you include the regex in a html pattern attribute and try to validate the same string again, it shall not pass:

<form>
  <div>
    <input type="text" placeholder="Password" 
      pattern="((?=.*\d)(?=.*[A-Z]))">
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>
Bavi Gurunath
  • 73
  • 6

1 Answers1

1

You need to make sure the pattern matches (and consumes) the entire string because the HTML5 pattern regex is anchored by default.

<form>
  <div>
    <input type="text" placeholder="Password" 
      pattern="(?=.*\d)(?=.*[A-Z]).*">
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

The (?=.*\d)(?=.*[A-Z]).* pattern will be turned into ^(?:(?=.*\d)(?=.*[A-Z]).*)$ and it will match:

  • ^ - start of string
  • (?: - start of a non-capturing group:
    • (?=.*\d) - a positive lookahead check to make sure there is at least 1 digit
    • (?=.*[A-Z]) - a positive lookahead check to make sure there is at least 1 uppercase letter
    • .* - any 0+ chars, greedily, up to the end of string
  • ) - end of the non-capturing group
  • $ - end of string.
Ciabaros
  • 1,681
  • 12
  • 15
Wiktor Stribiżew
  • 561,645
  • 34
  • 376
  • 476
  • IMPORTANT: To clarify, the pattern must CAPTURE your entire input, not just match it. This is why you need the .* – Ciabaros Mar 06 '20 at 20:46
  • 1
    @Ciabaros It is not capturing here, it is *consuming*. To capture, you need to use capturing groups, and there are none here. – Wiktor Stribiżew Mar 06 '20 at 20:49