如何检查密码是否至少包含一个允许的特殊字符？

Question

我有检查密码的功能。此函数应检查密码值是否至少包含我在描述中列出的特殊章程之一。这是一个例子：

$('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>

正如您在上面的代码中看到的，有一个 if 语句用于寻找匹配的特殊字符之一。我发现了问题。我的正则表达式一直有效，直到我输入 \ ，正则表达式无法识别反斜杠。此外，如果我在反斜杠后输入任何字符，我会看到 ID 为 letter 的 li 变为绿色。这是一个错误，我不确定为什么将其设置为有效。我想我的正则表达式因为\ 而被破坏了，我不确定在 JavaScript 中检查反斜杠和正斜杠的正确方法是什么？

Answer 1

您可以通过前瞻大大简化您的表达式：

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

没有verbose模式：

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

这利用了对比原理。
另请注意，[A-z] 匹配 more characters than you think。

---

这就是我的意思：

$('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();
});