vue密码强度组件

最新推荐文章于 2024-08-23 07:57:20 发布

辣子鸡丁上将

最新推荐文章于 2024-08-23 07:57:20 发布

阅读量6k

点赞数 2

分类专栏： Vue 文章标签： VUE

本文链接：https://blog.csdn.net/weixin_39205240/article/details/82224207

版权

Vue 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

1. checkpassStrong.js

export function checkStrong(sValue) {
  var modes = 0;
  //正则表达式验证符合要求的
  if (sValue.length < 1) return modes;
  if (/\d/.test(sValue)) modes++; //数字
  if (/[a-z]/.test(sValue)) modes++; //小写
  if (/[A-Z]/.test(sValue)) modes++; //大写  
  if (/\W/.test(sValue)) modes++; //特殊字符

  //逻辑处理
  switch (modes) {
    case 1:
      return 1;
      break;
    case 2:
      return 2;
      break;
    case 3:
    case 4:
      return sValue.length < 12 ? 3 : 4
      break;
  }
  return modes;
}

2. massage.vue

<template>
<div class="Password">
    <el-input v-model="input" placeholder="请输入内容" type="password"></el-input>
    <el-button type="info" v-text="msgText"></el-button>
</div>
</template>

<script>
import {
    checkStrong
} from '../../utils/checkpassStrong.js';
export default {
    name: 'password',
    data() {
        return {
            input: null,
            msgText: null
        }
    },
    methods: {
    },

    computed: {},

    watch: {
      input(newValue,oldValue){
        this.msgText = checkStrong(newValue)
      }
    }
}
</script>

<style lang="less">

</style>