$('#pass').keyup(function(e) {
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
var enoughRegex = new RegExp("(?=.{6,}).*", "g");
if (false == enoughRegex.test($(this).val())) {
$('#passstrength').html('More Characters');
} else if (strongRegex.test($(this).val())) {
$('#passstrength').className = 'ok';
$('#passstrength').html('Strong!');
} else if (mediumRegex.test($(this).val())) {
$('#passstrength').className = 'alert';
$('#passstrength').html('Medium!');
} else {
$('#passstrength').className = 'error';
$('#passstrength').html('Weak!');
}
return true;
});
假设此 HTML
<input type="password" name="pass" id="pass" />
<span id="passstrength"></span>
请提供示例!
只需将其粘贴到 Dreamweaver 中并运行即可!……甚至可以使用记事本 :)
不起作用!
您是否已将您的 jQuery 文件添加到页面中?
对我来说运行良好,并且是一个非常好的识别脚本
@Amine:要使其正常工作,您只需在结束标签后粘贴代码即可
感谢代码片段
对我来说不起作用
如何将 js 代码放入 html 文件中?
此代码片段效果很好!以下是实际操作中的简单代码:http://jsfiddle.net/9SUWP/
必须将此 js 与上述代码一起使用
script src=”https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.6.2/jquery.min.js”>
很酷的代码片段。 :)
非常有用的代码片段,可惜我直到现在才看到它,因为我可以在我完成的一个最近的项目中使用它。下次!
最佳示例。感谢分享代码。我为您的示例发送了额外的 css 代码,并更改为如下获取 js 代码
CSS
.passstrength {
border: 1px solid #D7D7D7;
background-color: #eaeaea;
font-size: 9px;
vertical-align: middle;
display: inline-block;
margin-top: 5px;
}
.passstrength.error {
border: 1px solid #ff6161;
background-color: #ff7575;
}
.passstrength.alert {
border: 1px solid #ffc937;
background-color: #ffde5a;
}
.passstrength.ok {
border: 1px solid #4bb12c;
background-color: #57c435;
}
JS
$(‘#pass’).keyup(function(e) {
…
if (false == enoughRegex.test($(this).val())) {
$(this).next(‘.passstrength’).html(”);
} else if (strongRegex.test($(this).val())) {
$(this).next(‘.passstrength’).attr(‘class’,’passstrength’);
$(this).next(‘.passstrength’).addClass(‘ok’);
$(this).next(‘.passstrength’).html(‘Strong!’);
} else if (mediumRegex.test($(this).val())) {
$(this).next(‘.passstrength’).attr(‘class’,’passstrength’);
$(this).next(‘.passstrength’).addClass(‘alert’);
$(this).next(‘.passstrength’).html(‘Medium!’);
} else {
$(this).next(‘.passstrength’).attr(‘class’,’passstrength’);
$(this).next(‘.passstrength’).addClass(‘error’);
$(this).next(‘.passstrength’).html(‘Weak!’);
}
…
});
$(‘#pass’).keyup(function(e) {
…
if (false == enoughRegex.test($(this).val())) {
$(‘.passstrength’).html(”);
} else if (strongRegex.test($(this).val())) {
$(‘.passstrength’).attr(‘class’,’passstrength’);
$(‘.passstrength’).addClass(‘ok’);
$(‘.passstrength’).html(‘Strong!’);
} else if (mediumRegex.test($(this).val())) {
$(‘.passstrength’).attr(‘class’,’passstrength’);
$(‘.passstrength’).addClass(‘alert’);
$(‘.passstrength’).html(‘Medium!’);
} else {
$(‘.passstrength’).attr(‘class’,’passstrength’);
$(‘.passstrength’).addClass(‘error’);
$(‘.passstrength’).html(‘Weak!’);
}
…
});
不错的脚本。正是我想要的。我做了一个小调整,以便我向用户提供更明显的通知,并且进行了简化,因为我的脚本只需要最少的字符。
http://jsfiddle.net/Xt9yG/
再次感谢脚本。
为什么返回 true?为什么不返回 false?
我们可以返回 $(this) 以允许链式调用吗?