title: How to check if password has at least one of the allowed special characters?
body: <p>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:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('input[type=password]').keyup(function() {
    var pswd = $(this).val();
  
    //validate the length
    if (pswd.length &lt; 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(/[!"#$%&amp;'()*+,-.:;&lt;=&gt;?@[\]^_`{|}~]/)) {
      $('#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();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="form-group required password-container"&gt;
    &lt;label class="control-label" for="password"&gt;Password&lt;/label&gt;
    &lt;input type="password" class="form-control" name="temp_password" id="temp_password" placeholder="Enter Password" maxlength="64" required&gt;
    &lt;small id="passwordHelp" class="form-text text-muted"&gt;Special characters allowed:  &lt;span class="text-danger"&gt;!"#$%&amp;'()*+,-.:;&lt;=&gt;?@[\]^_`{|}~&lt;/span&gt;&lt;/small&gt;
    &lt;div id="pswd_info" class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
        &lt;h5&gt;Password requirements:&lt;/h5&gt;
      &lt;/div&gt;
      &lt;div class="panel-body"&gt;
        &lt;ul&gt;
          &lt;li id="letter" class="invalid"&gt;At least &lt;strong&gt;one letter&lt;/strong&gt;&lt;/li&gt;
          &lt;li id="capital" class="invalid"&gt;At least &lt;strong&gt;one capital letter&lt;/strong&gt;&lt;/li&gt;
          &lt;li id="number" class="invalid"&gt;At least &lt;strong&gt;one number&lt;/strong&gt;&lt;/li&gt;
          &lt;li id="character" class="invalid"&gt;At least &lt;strong&gt;one special character&lt;/strong&gt;&lt;/li&gt;
          &lt;li id="length" class="invalid"&gt;Be at least &lt;strong&gt;8 characters&lt;/strong&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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 <code>\</code> , regex doesn't recognize backslash. Also If I enter any of the characters after backslash I see that <code>li</code> with id <code>letter</code> 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 <code>\</code> and I'm not sure what is the correct way to check for back and forward slash in JavaScript?  </p>