vue + jquery實現進度條提示密碼強度效果【附全碼】

近期，爲了加強對密碼校驗的同時，也要提醒用戶設置或修改密碼的同時，達到提醒用戶密碼設置是否過於簡單，如下便是除了對密碼本身的校驗，也加入了密碼強弱校驗的實現；

先來張效果展示圖：

 以下是觸發事件展示彈框；

<v-modal :id="'modal-mima'" :title="'修改密碼'">
      <div slot="body">
        <el-form :model="updatePass" status-icon ref="updatePass" :rules="passRules" label-width="150px"
                 class="demo-ruleForm">
          <el-form-item label="輸入舊密碼" prop="oldPassword">
            <el-input type="password" class="col-sm-8" v-model="updatePass.oldPassword" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="輸入新密碼" prop="newPassword">
            <el-input id="new_pwd" type="password" class="col-sm-8" v-model="updatePass.newPassword" autocomplete="off"></el-input>
          </el-form-item>
          <div class="form-group clearfix" style="margin-bottom: 5px;">
            <span class="col-sm-7" style="color: #707070; padding-bottom: 5px;">(以字母開頭，長度在6~18之間，包含字母、數字和特殊符號)</span>
            <div class="col-sm-10 pull-right">
              <div id="level" class="pw-strength" style="margin-left: 20px">
                <div class="pw-bar"></div>
                <div class="pw-bar-on"></div>
                <div class="pw-txt">
                  <span>弱</span>
                  <span>中</span>
                  <span>強</span>
                </div>
              </div>
            </div>
          </div>
          <el-form-item label="重複輸入新密碼" prop="password">
            <el-input type="password" class="col-sm-8" v-model="updatePass.password" autocomplete="off"></el-input>
            <el-tooltip class="item" effect="dark" content="確認密碼與新密碼相同" placement="right">
              <i class="icon-question-sign" style="margin-bottom:1px"></i>
            </el-tooltip>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button type="button" size="small" @click="submitPass('updatePass')" class="btn btn-success">提交</el-button>
        <el-button type="button" size="small" class="btn btn-default" data-dismiss="modal" ref="closeModalBtn">取消
        </el-button>
      </div>
    </v-modal>

 對vue中mounted的理解：

是vue中的一個鉤子函數，一般在初始化頁面完成後，再對dom節點進行相關操作；所以下段jquery校驗放在mounted中；

     mounted: function () {
      let self = this;
      //密碼強弱校驗
      $(document).ready(function () {
        // 密碼強度校驗
        // 強： 密碼爲八位及以上並且字母數字特殊字符三項都包括,強度最強
        // 中： 密碼爲七位及以上並且字母、數字、特殊字符三項中有兩項，強度是中等
        // 弱： 密碼爲6位及以下，就算字母、數字、特殊字符三項都包括，強度也是弱的
        $('#new_pwd').keyup(function () {
          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,})(^[a-zA-Z]).*", "g");
          if (false == enoughRegex.test($(this).val())) {
            //密碼小於六位並且非字母開頭的時候，密碼強度圖片都爲灰色,不可提交修改
            $('#level').removeClass('pw-weak');
            $('#level').removeClass('pw-medium');
            $('#level').removeClass('pw-strong');
            $('#level').addClass(' pw-defule');
            self.pwdStrength = 'unable';
            console.log("1", self.pwdStrength)
          }
          else if (strongRegex.test($(this).val())) {
            //密碼爲八位及以上並且字母數字特殊字符三項都包括,強度最強，可提交修改
            $('#level').removeClass('pw-weak');
            $('#level').removeClass('pw-medium');
            $('#level').removeClass('pw-strong');
            $('#level').addClass(' pw-strong');
            self.pwdStrength = 'strong';
            console.log("2", self.pwdStrength)
          }
          else if (mediumRegex.test($(this).val())) {
            //密碼爲七位及以上並且字母、數字、特殊字符三項中有兩項，強度是中等，可提交修改
            $('#level').removeClass('pw-weak');
            $('#level').removeClass('pw-medium');
            $('#level').removeClass('pw-strong');
            $('#level').addClass(' pw-medium');
            self.pwdStrength = 'medium';
            console.log("3", self.pwdStrength)
          }
          else {
            //如果密碼爲6爲及以下，就算字母、數字、特殊字符三項都包括，強度也是弱的,不可提交修改
            $('#level').removeClass('pw-weak');
            $('#level').removeClass('pw-medium');
            $('#level').removeClass('pw-strong');
            $('#level').addClass('pw-weak');
            self.pwdStrength = 'week';
            console.log("4", self.pwdStrength)
          }
          return true;
        });
      });
    },

 註釋：

1、pwdStrength: '',用於校驗新密碼強度是否達到要求；

2、給輸入新密碼標記一個id，id="new_pwd"；用於jquery 事件綁定到該元素id上；即

$('#new_pwd').keyup(function () {
...
})

3、本密碼強弱效果，涉及到兩張image，需要的加羣自取；羣號：708072830

 ❤如果文章對您有所幫助，就在文章的右上角或者文章的末尾點個贊吧！(づ￣ 3￣)づ

❤如果喜歡慫慫寫的文章，就給阿慫點個關注吧！(๑′ᴗ‵๑)づ╭❤～

❤對文章有任何問題歡迎小夥伴們下方留言，阿慫看到一定會極力給予寧最滿意的答覆。