使用 jquery password strength + jquery 对密码强度做校验
访问量: 2370
步骤:
1. 确保你的输入密码div区域中,包括:
<div class="control-group" id='pwd-container'>
<%= f.label "密码", :class => 'control-label' %>
<div id='password_messages' style='color:red'></div>
<div class="controls" style=''>
<%= f.password_field :password, :class => 'form-control', :placeholder=>"请输入密码", autocomplete: "off" %>
</div>
<div id='pwstrength_viewport_progress' style='width: 150px;
display: inline-block'>密码强度:</div>
</div>
2. 加入下面的js: (仅针对password 的强度做校验)
var options = {};
options.ui = {
container: "#pwd-container",
showVerdictsInsideProgressBar: true,
viewports: {
progress: "#pwstrength_viewport_progress"
}
};
options.common = {
debug: true,
onLoad: function () {
$('#password_messages').text('请输入密码,大小写字母外加特殊符号(@,#,-等),8位以上');
},
onKeyUp: function (evt, data) {
if(data.score > 35) { // 可以根据当前的校验分数做一些事情
$('#password_messages').hide();
}else{
$('#password_messages').show();
}
},
};
$(':password').pwstrength(options); // 对于所有的password项都增加这个校验
3. 与jquery validate 做集成, 增加这段js:
$.validator.addMethod(
"is_password_strong_enough",
function(value, element) {
return $('.password-verdict').text().match('强')
},
"密码强度必须是'强'或 '非常强'"
);
$("form").validate({
rules:{
"manager[login_name]":"required",
"manager[password]":"is_password_strong_enough"
},
messages:{
"manager[login_name]":"请输入登录名",
"manager[password]":"密码强度必须是'强'或 '非常强'"
}
});