我有检查密码的功能。此函数应检查密码值是否至少包含我在说明中列出的一个特殊章程。这是一个例子:
$('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语句可以查找其中一个特殊字符的匹配项。我发现了这个问题。我的正则表达式有效,直到我输入\
,正则表达式无法识别反斜杠。此外,如果我在反斜杠后输入任何字符,我会看到身份li
的{{1}}变为绿色。这是一个错误,我不确定为什么会被设置为有效。我想我的正则表达式因为letter
而破坏了,我不确定在JavaScript中检查后退和正斜杠的正确方法是什么?
答案 0 :(得分: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();
});