javascript - How to make input password require at least one special character (bracket included) - Stack Overflow

admin管理员组

文章数量:1277397

I was wondering how to add in the special character part with brackets like {} [] () and other stuff like " ' - to the unique character I tried below, but for some reason when I add in another of those characters it stops working.

<-- works but does not have any brackets or quotes for special character-->
<form acton = "#">      
    <input type="password" id="newPass" required
      pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*?[0-9])(?=.*?[!@#$%^&*+`~=?\|<>/]).{8,}"

    <button>submit</button>

</form>

The part above works but does not have quotes or more special character

Code below has bracket but does not work

<-- does not work (if you do not enter special character user will be able to submit but it does not have any brackets -->

<form acton = "#">      
    <input type="password" id="newPass" required
      pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*?[0-9])(?=.*?[~`!@#$%^&*()-_=+[]{};:'.,"\|/?><]).{8,}"

    <button>submit</button>

</form>

also this did not work (from an answer)

<form acton = "#">      
    <input type="password" id="pass" required
      pattern="(?=.*\d)(?=.*[a-z])(?=.*?[0-9])(?=.*?[~`!@#$%\^&*()\-_=+\[\]{};:\'.,\"\\|/?\>\<]).{4,}">

    <button>submit</button>

</form>

I am looking for an answer that makes the bottom part (the one with brackets and all of those special character I included) works.

I was wondering how to add in the special character part with brackets like {} [] () and other stuff like " ' - to the unique character I tried below, but for some reason when I add in another of those characters it stops working.

<-- works but does not have any brackets or quotes for special character-->
<form acton = "#">      
    <input type="password" id="newPass" required
      pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*?[0-9])(?=.*?[!@#$%^&*+`~=?\|<>/]).{8,}"

    <button>submit</button>

</form>

The part above works but does not have quotes or more special character

Code below has bracket but does not work

<-- does not work (if you do not enter special character user will be able to submit but it does not have any brackets -->

<form acton = "#">      
    <input type="password" id="newPass" required
      pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*?[0-9])(?=.*?[~`!@#$%^&*()-_=+[]{};:'.,"\|/?><]).{8,}"

    <button>submit</button>

</form>

also this did not work (from an answer)

<form acton = "#">      
    <input type="password" id="pass" required
      pattern="(?=.*\d)(?=.*[a-z])(?=.*?[0-9])(?=.*?[~`!@#$%\^&*()\-_=+\[\]{};:\'.,\"\\|/?\>\<]).{4,}">

    <button>submit</button>

</form>

I am looking for an answer that makes the bottom part (the one with brackets and all of those special character I included) works.

• javascript
• html
• css

Share Improve this question Follow edited Jun 29, 2020 at 19:56 Stephen P 14.8k22 gold badges4747 silver badges7070 bronze badges asked Jun 26, 2020 at 21:59 dragonndragonn 33111 gold badge66 silver badges2323 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6 +50

Since it is regex, all of the characters inside [.....] are allowed, so you should add brackets to there. You can do this with the usage of escape character (because brackets has a role in regex). So just add \] and \[ to the characters allowed inside [.....].

try:

<input type="password" name="pw" pattern="(?=.*?[#?!@$%^&*-\]\[])"

By the way.. I would remend working with regex cheat sheet, it will help you a lot in validation tasks.

As for your EDIT:

The " and ' needed to be escaped. While \" \' won't work you can use \x27 and \x22 instead, these are the hexadecimal representation of " and ' in the ascii table.

try:

<form acton = "#">      
        <input type="password" id="pass"  required pattern = "(?=.*\d)(?=.* 
     [a-z])(?=.*?[0-9])(?=.*?[~`!@#$%\^&*()\-_=+[\]{};:\x27.,\x22\\|/?><]).{4,}">

        <button>submit</button>

</form>

You should escape regex (e.g. \]) characters if they need to be matched during pattern search. Also, refer to the existing answer:

Braces and brackets in passwords

The following works for me, hopefully it should work at your end: (I merely added escaped characters)

   <input type="password" id="newPass" required
      pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*?[0-9])(?=.*?[!@#$%^&*+`~'=?\|\]\[\(\)\-<>/]).{8,}">

You're actually very close. The biggest mistakes are:

You should escape some of the special characters inside the character group and you should have hyphen as the last character (otherwise it's a range).

Here is the RegExp you request:

<input type="password" id="pass"  required pattern = "(?=.*\d)(?=.*[a-z])(?=.*?[0-9])(?=.*?[~`!@#$%^&amp;*()_=+\[\]{};:&apos;.,&quot;\\|\/?&gt;&lt;-]).{4,}">

Update: I forgot to html encode the pattern for use directly in html. Now it should work.

本文标签：