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

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(/[az]/)) { $('#letter').removeClass('invalid').addClass('valid'); } else { $('#letter').removeClass('valid').addClass('invalid'); } //validate capital letter if (pswd.match(/[AZ]/)) { $('#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,}$

这利用了对比原理。
另请注意， [Az]匹配的字符比您想象的多。

---

这就是我的意思：

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