欢迎来到cool的博客
7

Music box

Click to Start

点击头像播放音乐
新博客链接

使用 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]": "请输入原密码"
      }
  });

 

 

返回列表