我正在尝试在输入时验证客户端密码,方法是更改有关给定密码的密码提示。在编码/服务器端,我已经添加了验证并且它也在工作。在客户端,我想使用提示提醒用户。
仅举例说明我的意思:
我想在符合密码验证后将glyphicon删除图标更改为OK。这只是告诉用户密码有效或无效的用户指示。
以下代码:
<div class="row" style="text-align:left; font-weight:bold ; color:navy;">
Password Hint:
</div>
<div class="row" style=" color:black; margin:10px 0px">
<span id="Length" class="glyphicon glyphicon-remove" style="font-weight:bold;color:red "></span> Minimum 6 digits
<br /><span id="UpperCase" class="glyphicon glyphicon-remove" style="font-weight:bold;color:red "></span> Atleast 1 upper case letters (A – Z)
<br /><span id="LowerCase" class="glyphicon glyphicon-remove" style="font-weight:bold;color:red "></span> Atleast 1 Lower case letters (a – z)
<br /><span id="Numbers" class="glyphicon glyphicon-remove" style="font-weight:bold;color:red "></span> Atleast 1 number (0 – 9)
<br /><span id="Symbols" class="glyphicon glyphicon-remove" style="font-weight:bold;color:red "></span> Atleast 1 non-alphanumeric symbol (e.g. ‘@@Z$%£!’)
</div>
下面的脚本:
<script type="text/javascript" >
$(function () {
$("#NewPassword").bind("keyup", function () {
var regex1 = new Array();
var regex2 = new Array();
var regex3 = new Array();
var regex4 = new Array();
regex1.push("[A-Z]"); //Uppercase Alphabet.
regex2.push("[a-z]"); //Lowercase Alphabet.
regex3.push("[0-9]"); //Digit.
regex4.push("[!@@#$%^&*]"); //Special Character.
if ($(this).val().length<6) {
$('#Length').removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok ");
}
for (var i = 0; i < regex1.length; i++) {
if (new RegExp(regex[i]).test($(this).val())) {
$('#UpperCase').removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok ");
}
}
for (var i = 0; i < regex2.length; i++) {
if (new RegExp(regex[i]).test($(this).val())) {
$('#LowerCase').removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok");
}
}
for (var i = 0; i < regex3.length; i++) {
if (new RegExp(regex[i]).test($(this).val())) {
$('#Numbers').removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok");
}
}
for (var i = 0; i < regex4.length; i++) {
if (new RegExp(regex[i]).test($(this).val())) {
$('#Symbols').removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok");
}
}
});
});
</script>
我的密码文本框ID为&#34; NewPassword&#34;。但我上面的编码不起作用。我只有显示器,但没有工作。
答案 0 :(得分:0)
它看起来只是你的javascript中的拼写错误。每次循环遍历其中一个阵列时,您都会引用正则表达式[i]而不是regex1 [i],或者循环遍历的阵列。
我稍微调整了样式,只是为了让它在本地工作。
<div class="row" style=" color:black; margin:10px 0px">
<p id="Length" class="alert alert-danger">Minimum 6 digits</p>
<p id="UpperCase" class="alert alert-danger">At least 1 upper case letters (A – Z)</p>
<p id="LowerCase" class="alert alert-danger"> At least 1 Lower case letters (a – z)</p>
<p id="Numbers" class="alert alert-danger">At least 1 number (0 – 9)</p>
<p id="Symbols" class="alert alert-danger"> At least 1 non-alphanumeric symbol (e.g. ‘@@Z$%£!’)</p>
</div>
这是在设置正则表达式变量之后的javascript。
$('p.alert').removeClass('alert-success').addClass('alert-danger');
if ($(this).val().length<6) {
$('#Length').removeClass("alert-danger").addClass("alert-success");
}
for (var i = 0; i < regex1.length; i++) {
if (new RegExp(regex1[i]).test($(this).val())) {
$('#UpperCase').removeClass("alert-danger").addClass("alert-success");
}
}
for (var i = 0; i < regex2.length; i++) {
if (new RegExp(regex2[i]).test($(this).val())) {
$('#LowerCase').removeClass("alert-danger").addClass("alert-success");
}
}
for (var i = 0; i < regex3.length; i++) {
if (new RegExp(regex3[i]).test($(this).val())) {
$('#Numbers').removeClass("alert-danger").addClass("alert-success");
}
}
for (var i = 0; i < regex4.length; i++) {
if (new RegExp(regex4[i]).test($(this).val())) {
$('#Symbols').removeClass("alert-danger").addClass("alert-success");
}
}