使用 jquery password strength + jquery 对密码强度做校验
首先把pwstrength-bootstrap.js 拷贝到本地的rails项目中 asset:
https://cdn.bootcss.com/pwstrength-bootstrap/2.0.8/pwstrength-bootstrap.js
在application.js中引用:
//= require pwstrength-bootstrap.js
1. 确保你的输入密码div (id='pwd-container')区域中:
<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. 在对应的erb页面加入下面的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项都增加这个校验, 指定的密码验证,就加上指定的id.
3. 与jquery validate 表单验证做集成, 增加这段js:
$.validator.addMethod( "is_password_strong_enough", function(value, element) { return $('.password-verdict').text().match('强') }, "密码强度必须是'强'或 '非常强'" ); $("form").validate({ rules: { "user[password]": "is_password_strong_enough", "user[password_confirmation]": { equalTo : "#user_password" //jquery validate password confirmation }, "user[current_password]": "required" }, messages: { "user[password]":"密码强度必须是'强'或 '非常强'", "user[password_confirmation]": { equalTo: "请确认两次输入密码一致" }, "user[current_password]": "请输入原密码" } });