How to check if password has at least one of the allowed special characters?

Question

I have function that checks password. This function should check if password values contains at least one of the special charters that I listed in the description. Here is example:

$('input[type=password]').keyup(function() {
  var pswd = $(this).val();

  //validate the length
  if (pswd.length < 8) {
    $('#length').removeClass('valid').addClass('invalid');
  } else {
    $('#length').removeClass('invalid').addClass('valid');
  }

  //validate letter
  if (pswd.match(/[a-z]/)) {
    $('#letter').removeClass('invalid').addClass('valid');
  } else {
    $('#letter').removeClass('valid').addClass('invalid');
  }

  //validate capital letter
  if (pswd.match(/[A-Z]/)) {
    $('#capital').removeClass('invalid').addClass('valid');
  } else {
    $('#capital').removeClass('valid').addClass('invalid');
  }

  //validate special character
  if (pswd.match(/[!"#$%&'()*+,-.:;<=>?@[\]^_`{|}~]/)) {
    $('#character').removeClass('invalid').addClass('valid');
  } else {
    $('#character').removeClass('valid').addClass('invalid');
  }

  //validate number
  if (pswd.match(/\d/)) {
    $('#number').removeClass('invalid').addClass('valid');
  } else {
    $('#number').removeClass('valid').addClass('invalid');
  }
}).focus(function() {
  $('#pswd_info').show();
}).blur(function() {
  $('#pswd_info').hide();
});

.form-group.required .control-label:after {
   content: "*";
   color: red;
}
.password-container {
 position: relative;
}
#pswd_info {
    position:absolute;
    width:250px;
    font-size:.875em;
}
#pswd_info::before {
    content: "\25B2";
    position:absolute;
    top:-12px;
    left:45%;
    font-size:14px;
    line-height:14px;
    color:#ddd;
    text-shadow:none;
    display:block;
}
#pswd_info ul {
 margin: 0;
 padding: 0;
}
#pswd_info li {
 list-style: none;
}
.invalid {
    padding-left: 22px;
    line-height: 24px;
    color: #ec3f41;
}
.valid {
    padding-left: 22px;
    line-height: 24px;
    color: #3a7d34;
}
#pswd_info {
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group required password-container">
  <label class="control-label" for="password">Password</label>
  <input type="password" class="form-control" name="temp_password" id="temp_password" placeholder="Enter Password" maxlength="64" required>
  <small id="passwordHelp" class="form-text text-muted">Special characters allowed:  <span class="text-danger">!"#$%&'()*+,-.:;<=>?@[\]^_`{|}~</span></small>
  <div id="pswd_info" class="panel panel-default">
    <div class="panel-heading">
      <h5>Password requirements:</h5>
    </div>
    <div class="panel-body">
      <ul>
        <li id="letter" class="invalid">At least <strong>one letter</strong></li>
        <li id="capital" class="invalid">At least <strong>one capital letter</strong></li>
        <li id="number" class="invalid">At least <strong>one number</strong></li>
        <li id="character" class="invalid">At least <strong>one special character</strong></li>
        <li id="length" class="invalid">Be at least <strong>8 characters</strong></li>
      </ul>
    </div>
  </div>
</div>

As you can see in the code above there is if statement that looking for the match for one of the special characters. i found the problem. My regular expression works until I enter \ , regex doesn't recognize backslash. Also If I enter any of the characters after backslash I see that li with id letter turns green. That is a bug and I'm not sure why that would be set to valid. I guess that my regex is breaking because of the \ and I'm not sure what is the correct way to check for back and forward slash in JavaScript?

Possible duplicate of [Reference - Password Validation](https://stackoverflow.com/questions/48345922/reference-password-validation) — ctwheels, Feb 28 '18 at 18:36
Your regex `[A-z]` should be `[a-z]`. I'd also suggest you at least use `[^a-zA-Z\d]` instead of a list of symbols. — ctwheels, Feb 28 '18 at 18:37
@WiktorStribiżew creates a range of what? All allowed special characters? — espresso_coffee, Feb 28 '18 at 18:38
Ok, `[,-.]` matches `,`, `-` or `.`, they are just consecutive in the ASCII table. — Wiktor Stribiżew, Feb 28 '18 at 18:40
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/165991/discussion-between-ctwheels-and-espresso-coffee). — ctwheels, Feb 28 '18 at 19:23
@WiktorStribiżew is there a way to check for backslash in regex javascript ? — espresso_coffee, Feb 28 '18 at 20:28
@WiktorStribiżew I have tied this but still doesn't match the backslash pswd.match(/[!"#$%&'()*+,-.:;<=>?@[\\]^_`{|}~]/) as you can see I have double backslash inside square brackets but still does not work. — espresso_coffee, Feb 28 '18 at 20:35
Come on, I bet your string does not contain a backslash. You must be using something like `var s = "\s"`, right? You must use `var s = "\\s"`. `"\s"` = `s`, and `"\\s"` = `\s`. — Wiktor Stribiżew, Feb 28 '18 at 20:37
I'm just letting user an option to enter backslash if they want. That should be allowed in my regexp... — espresso_coffee, Feb 28 '18 at 20:38

Jan · Answer 1 · 2018-02-28T21:14:30.797

2

You can vastly simplify your expression with lookaheads:

^
(?=[^A-Z]*[A-Z])
(?=[^!"#$%&'()*+,-.:;<=>?@[\]^_`{|}~]*[!"#$%&'()*+,-.:;<=>?@[\]^_`{|}~])
(?=\D*\d).{8,}
$

Without verbose mode:

^(?=[^A-Z]*[A-Z])(?=[^!"#$%&'()*+,-.:;<=>?@[\]^_`{|}~]*[!"#$%&'()*+,-.:;<=>?@[\]^_`{|}~])(?=\D*\d).{8,}$

This makes use of the principle of contrasts.
Please also note that [A-z] matches more characters than you think.

This is what I mean:

$('input[type=password]').keyup(function() {
  var pswd = $(this).val();
  if (pwsd.match(/^(?=[^A-Z]*[A-Z])(?=[^!"#$%&'()*+,-.:;<=>?@[\]^_`{|}~]*[!"#$%&'()*+,-.:;<=>?@[\]^_`{|}~])(?=\D*\d).{8,}$/)) {
     // now, it is valid
  } else {
     // invalid
  }
}).focus(function() {
  $('#pswd_info').show();
}).blur(function() {
  $('#pswd_info').hide();
});

edited Feb 28 '18 at 21:14

answered Feb 28 '18 at 18:39

Jan

42,290
8
54
79

So what I should replace in my line where I'm looking for special characters? I did make a mistake and should be [a-z] not [A-z]. Thanks. – espresso_coffee Feb 28 '18 at 18:43
@espresso_coffee: Everything from `//validate the length` up to `//validate number` (inclusive) can be deleted. – Jan Feb 28 '18 at 19:32
I still can't see how your code will replace mine and still work the same. Can you please show an example? – espresso_coffee Feb 28 '18 at 19:38
Can't open the link. – espresso_coffee Feb 28 '18 at 21:07
@espresso_coffee: See the updated answer then, have posted the code there. – Jan Feb 28 '18 at 21:14

How to check if password has at least one of the allowed special characters?

1 Answers1