我正在使用 bootstrap 在 asp.net 中工作。我想验证密码字段。当用户单击密码字段时,我的代码显示信息框。
<div id="pswd_info">
<h4>Password requirements:</h4>
<ul>
<li id="letter" class="invalid fa-warning"> 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="special" 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>
<!-- password info box-->
<script>
$(document).ready(function () {
$('#password').keyup(function () {
// set password variable
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 number
if (pswd.match(/\d/)) {
$('#number').removeClass('invalid').addClass('valid');
} else {
$('#number').removeClass('valid').addClass('invalid');
}
//validate special character
if (pswd.match(/[!@#$ %^&*]/)){
$('#special').removeClass('invalid').addClass('valid');
} else {
$('#special').removeClass('valid').addClass('invalid');
}
});
$('#password').focus(function () {
$('#pswd_info').show();
});
$('#password').blur(function () {
$('#pswd_info').hide();
});
});
</script>
上面的代码只是显示信息框并根据用户输入更改每个 li。但是,仍然接受任何不符合标准的密码。如何验证#password 字段?我已经有了下面的脚本来验证其他字段
<script>
// initialize the validator function
validator.message.date = 'not a real date';
// validate a field on "blur" event, a 'select' on 'change' event & a '.reuired' classed multifield on 'keyup':
$('form')
.on('blur', 'input[required], input.optional, select.required', validator.checkField)
.on('change', 'select.required', validator.checkField)
.on('keypress', 'input[required][pattern]', validator.keypress);
$('.multi.required').on('keyup blur', 'input', function() {
validator.checkField.apply($(this).siblings().last()[0]);
});
$('form').submit(function(e) {
e.preventDefault();
var submit = true;
// evaluate the form using generic validaing
if (!validator.checkAll($(this))) {
submit = false;
}
if (submit)
this.submit();
return false;
});
</script>
最少八个字符,至少一个字母和一个数字:
"^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$"
最少八个字符,至少一个字母、一个数字和一个特殊字符:
"^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$"
最少八个字符,至少一个大写字母,一个小写字母和一个数字:
"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$"
最少 8 个字符,至少 1 个大写字母、1 个小写字母、1 个数字和 1 个特殊字符:
"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}"
最少 8 个、最多 10 个字符,至少 1 个大写字母、1 个小写字母、1 个数字和 1 个特殊字符:
"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,10}"
您可以编写简单的这一行来检查所有内容:
<input type="password" name="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required>