vue密码强度提示条

两种，先上效果图：

第一种：

第二种：



上前端代码
第一种：
vue页面：

<el-form ref="reForm" :model="reForm" :rules="rules">
        <el-form-item label="请输入新密码" prop="newPwd">
          <el-input style="width: 300px;" v-model="reForm.newPwd" maxlength="16" show-password type="password" placeholder="可填写数字、字母及特殊符号" />
        </el-form-item>
        <el-form-item v-if="reForm.newPwd!==''&&reForm.newPwd!==undefined" label="" align="center" label-width="0">
          <!--密码强度显示条-->
      <table  border="0" align="center" style="width: 25%;margin-left: 0px"><tr>
        <td width="30%"><el-progress :percentage="100" :color="low" :format="format"></el-progress></td>
        <td width="30%"><el-progress :percentage="100" :color="middle" :format="format"></el-progress></td>
        <td width="30%"><el-progress :percentage="100" :color="high" :format="format"></el-progress></td>
        <td width="10%">
          <div class="strength" :style="{color: fontColor}" v-if="user.newPassword!==''&&user.newPassword!==undefined">{{ strength }}</div>
        </td>
      </tr></table>
        </el-form-item>
      </el-form>
<script>
//这里我是从后台判断的
//读者完全可以在前台设置检验方式，如正则表达式
import {checkPasswd} from "api";
export default {
  name: "User",
  data() {
    const checkPawd = (rule, value, callback) => {
      checkPasswd(value).then(res=>{
        if(res.msg !=='notCheck'){
          this.notCheck=false
          if (res.msg === '低') {
            this.fontColor = 'red'
            this.strength = this.indicator['red']
          }
          if (res.msg === '中') {
            this.fontColor = 'orange'
            this.strength = this.indicator['orange']
          }
          if (res.msg === '高') {
            this.fontColor = 'blue'
            this.strength = this.indicator['blue']
          }
        }else{
          this.notCheck=true
        }
        callback();
      })
    };
    return {
      low:'#cccccc',
      middle:'#cccccc',
      high:'#cccccc',
      notCheck:true,
      fontColor: "red",
      strength: "",
      indicator: {
        "red": "低",
        "orange": "中",
        "blue": "高"
      },
      // 表单校验
      rules: {
        newPwd:[ { required: true, message: "新密码不能为空", trigger: "blur" },
          {
            validator: checkPawd,
            trigger: ['blur','change']
          }
        ],
      }
    };
  },
  methods: {
    //格式化进度显示
    format(percentage) {
      return percentage === 100 ? '' : `${percentage}%`;
    },
    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          //若开启校验
          if(this.notCheck === false){
            //若密码强度不为低则通过
            if(this.strength!=='低'){
             // this.updateUserPwd()
            }else{
              this.msgError('密码强度过低')
            }
          }else{
            //未开启校验,直接修改
           // this.updateUserPwd()
          }
        }
      });
    },
  }
};
</script>
<style lang="scss" scoped>
 .el-progress{
  width:160%;
}
.strength {
  font-size: 13px;
  color: #271E25;
  position: relative;
  top: 5px;
  left: 0;
  transition: 0.5s all ease;
}
</style>

第二种：
vue页面：

<el-form ref="reForm" :model="reForm" :rules="rules">
        <el-form-item label="请输入新密码" prop="newPwd">
          <el-input style="width: 300px;" v-model="reForm.newPwd" maxlength="16" show-password type="password" placeholder="可填写数字、字母及特殊符号" />
        </el-form-item>
        <el-form-item v-if="reForm.newPwd!==''&&reForm.newPwd!==undefined" label="" align="center" label-width="0">
          <div class="bar" :class="barColor" v-if="reForm.newPwd!==''&&reForm.newPwd!==undefined" :style="{width: width + 'px'}">
            <div class="strength" :style="{color: barColor}" v-if="reForm.newPwd!==''&&reForm.newPwd!==undefined">{{ strength }}</div>
          </div>
        </el-form-item>
      </el-form>
<script>
//这里我是从后台判断的
//读者完全可以在前台设置
import {checkPasswd} from "api";
export default {
  name: "User",
  data() {
    const checkPawd = (rule, value, callback) => {
      checkPasswd(value).then(res=>{
        if(res.msg !=='notCheck'){
          this.notCheck=false
          if (res.msg === '低') {
            this.width = 60
            this.barColor = 'red'
            this.strength = this.indicator['red']
          }
          if (res.msg === '中') {
            this.width = 120
            this.barColor = 'orange'
            this.strength = this.indicator['orange']
          }
          if (res.msg === '高') {
            this.width = 180
            this.barColor = 'blue'
            this.strength = this.indicator['blue']
          }
        }else{
          this.notCheck=true
        }
        callback();
      })
    };
    return {
      barColor: "red",
      strength: "",
      indicator: {
        "red": "低",
        "orange": "中",
        "blue": "高"
      },
      width:0,
      notCheck:true,
      //重置密码标题
      titleRest:"",
      reForm:{
        userIdforPwd: 0,
        newPwd:''
      },
      // 表单校验
      rules: {
        newPwd:[ { required: true, message: "新密码不能为空", trigger: "blur" },
          {
            validator: checkPawd,
            trigger: ['blur','change']
          }
        ],
      }
    };
  },
  methods: {
    /** 重置密码按钮操作 */
    handleResetPwd(row) {
      this.titleRest="重置用户密码"
     // this.reForm.userIdforPwd=row.userId
      this.openReset=true
    },
    //密码重置提交
    submitPwdForm(){
      this.$refs["reForm"].validate(valid => {
        if (valid) {
          //若开启校验
          if(this.notCheck === false){
            //若密码强度不为低则通过
            if(this.strength!=='低'){
              this.resetPassword()
            }else{
              this.msgError('密码强度过低')
            }
          }else{
            //未开启校验,直接修改
            this.resetPassword()
          }
        }
      })
    },
    //重置密码的方法
    resetPassword(){
      resetUserPwd(this.reForm.userIdforPwd, this.reForm.newPwd).then(res => {
        this.openReset = false
        this.reForm.newPwd = ''
        this.reForm.userIdforPwd = 0
        this.msgSuccess('重置成功')
      })
    }
  }
};
</script>
<style lang="scss" scoped>
  .strength {
    font-size: 13px;
    color: #271E25;
    position: relative;
    top: 5px;
    left: 0;
    transition: 0.5s all ease;
  }
  .bar {
    width: 60px;
    height: 5px;
    background: red;
    transition: 0.5s all ease;
    max-width: 180px;
    margin: 10px 0 5px 5px;
    position: absolute;
  }
  .red {
    background: red;
  }
  .orange {
    background: orange;
  }
  .blue {
    background: #1B8EF8;
  }
</style>

后台checkPwd方法

public String checkPwd(String pwd) {
        pwd = decryptPassword(pwd);
        String flag = configService.selectConfigByKey("pwd.switch");
        //判断是否开启校验
        if (flag.trim().equals("高") || flag.trim().equals("中") || flag.trim().equals("低")) {
            String low = configService.selectConfigByKey("pwd.low");
            String middle = configService.selectConfigByKey("pwd.middle");
            String high = configService.selectConfigByKey("pwd.high");
            if (pwd.matches(high)) {
                return "高";
            } else {
                if (pwd.matches(middle)) {
                    return "中";
                } else {
                    if (pwd.matches(low)) {
                        return "低";
                    } else {
                        return "未通过任何校验";
                    }
                }
            }
        }
        return "notCheck";
    }