vue3和ant-design 实现前端多种验证密码规则，最全的前端验证密码规则

1、小眼睛可以显示/隐藏明文密码（无法用input type=password，用css样式实现切换明文）

2、输入长度统计（不是自带的，用div写的，然后定位到框内的）

3、每输入一个字符分别验证每一项规则，符合就变绿色，删掉符合字符就变红色

4、根据符合规则的长度，判断密码强弱

HTML：

<template>
  <div class="InitializesSystemKey">
   <div class="password-box">
    <div class="password-box-title">
      <span>初始化系统秘钥</span>
      <Button style="margin: 15px 0;" @click="clickReturn">返回</Button>
    </div>
    <div class="password-box-set">
      <div class="password-box-set-title">
        设置秘钥
      </div>
      <div class="password-box-set-con">
        <div class="password-box-set-con-text">
          <span>
            设置秘钥 
            <eye-outlined v-if="!isEye" @click="isEye = true" style="color: #0E56C0;"/>
            <eye-invisible-outlined v-if="isEye" @click="isEye = false" style="color: #0E56C0;" />
          </span>
          <span style="font-size: 14px;color: #88909B;">{{ text }}</span>
        </div>
        <div class="password-box-set-con-input">
          <a-textarea v-model:value="inputVal" type="password" :rows="4" placeholder="请输入" @change="changeInput" :maxlength="256" :minlength="8" :style="isEye ? { '-webkit-text-security': 'disc' } : {}" />
          <div class="counter">{{ charCount }}/256</div>
        </div>
        <!-- 验证规则显示 -->
        <div class="password-box-set-con-rule">
          <div>
            <check-outlined v-if="isLargeLetter" style="color: #3AA679;"/>
            <close-outlined v-if="!isLargeLetter" style="color: #E53A2F;"/>
            <span :class="isLargeLetter ? 'colorGreen' : 'colorRed'">包含大写字母</span>
          </div>
          <div>
            <check-outlined v-if="isSmallLetter" style="color: #3AA679;"/>
            <close-outlined v-if="!isSmallLetter" style="color: #E53A2F;"/>
            <span :class="isSmallLetter ? 'colorGreen' : 'colorRed'">包含小写字母</span>
          </div>
          <div>
            <check-outlined v-if="isNumber" style="color: #3AA679;"/>
            <close-outlined v-if="!isNumber" style="color: #E53A2F;"/>
            <span :class="isNumber ? 'colorGreen' : 'colorRed'">包含数字</span>
          </div>
          <div>
            <check-outlined v-if="isSpecSymbol" style="color: #3AA679;"/>
            <close-outlined v-if="!isSpecSymbol" style="color: #E53A2F;"/>
            <span :class="isSpecSymbol ? 'colorGreen' : 'colorRed'">包含特殊符号</span>
          </div>
          <div>
            <check-outlined v-if="isLength" style="color: #3AA679;"/>
            <close-outlined v-if="!isLength" style="color: #E53A2F;"/>
            <span :class="isLength ? 'colorGreen' : 'colorRed'">秘钥长度16-256位</span>
          </div>
        </div>
        <div class="password-box-set-con-progress">
          <div class="password-box-set-con-progress-left">
            <div style="margin-left: 15px;" class="password-box-set-con-progress-left-col">
              <p :style="numLength == 1 ? { 'background': '#F8584D' } : {}"></p>
              <caret-up-outlined />
              <span :style="numLength == 1 ? { 'color': '#F8584D' } : {}">弱</span>
            </div>
            <div class="password-box-set-con-progress-left-col">
              <p :style="numLength == 2 ? { 'background': '#FAB247' } : {}"></p>
              <caret-up-outlined />
              <span :style="numLength == 2 ? { 'color': '#FAB247' } : {}">中</span>
            </div>
            <div class="password-box-set-con-progress-left-col">
              <p :style="numLength >= 3 ? { 'background': '#3AA679' } : {}"></p>
              <caret-up-outlined />
              <span :style="numLength >= 3 ? { 'color': '#3AA679' } : {}">强</span>
            </div>
          </div>
          <div class="password-box-set-con-progress-btn">
            <Button @click="">提交秘钥</Button>
          </div>
        </div>
      </div>
    </div>
   </div>
  </div>
</template>

CSS：

.InitializesSystemKey {
  position: fixed;
  bottom: 0;
  top: 50px;
  right: 0;
  left: 0;
  z-index: 999;
  width: 100vw;
  height: calc(100vh-50px);
  background: #f8f8f9;
  .password-box{
    position: absolute;
    top: 10%;
    left: 50%;
    // transform: translate(-50%, -50%);
    margin-left: -450px;
    width: 900px;
    height: 500px;
    &-title{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      span{
        color: #D91313;
        font-size: 40px;
      }
    }
    &-set{
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      &-title{
        padding: 10px;
        border-bottom: 1px solid #E5E6EB;
        font-size: 20px;
        font-weight: 600;
      }
      &-con{
        display: flex;
        flex-direction: column;
        &-text{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          padding: 15px 10px;
          span{
            font-size: 16px;
            color: #1D2128;
          }
        }
        &-input{
          padding: 0 10px;
          position: relative;
          border-radius: 10px;
          // 让计数在边框内
          .counter {
            position: absolute;
            bottom: 10px;
            right: 20px;
            padding: 0 5px;
          }
        }
        &-rule{
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          padding: 10px;
          gap: 15px;
          span{
            margin-left: 2px;
          }
          .colorGreen{
            color: #3AA679;
          }
          .colorRed{
            color: #E53A2F;
          }
        }
        &-progress{
          border-top: 1px solid #E5E6EB;
          padding: 15px 0 10px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          &-left{
            padding: 15px 0 10px;
            display: flex;
            flex-direction: row;
            
            gap: 5px;
            &-col{
              display: flex;
              flex-direction: column;
              align-items: center;
              p{
                width: 100px;
                height: 8px;
                background: #E5E6EB;
                margin: 0;
              }
            }
          }
          &-btn{
            margin: 10px 25px 0 0;
          }
          
        }
      }
    }
   
  }
}

JS逻辑：

import { onMounted, ref,computed} from 'vue';
import Button from '@/views/salary/components/button.vue';
const text = ref("请输入16~256位秘钥，需包含大小写、数字、特殊字符（仅支持以下字符：()`!@#$%^&*_-+=|{}[]:;'<>,.?")
const isEye =ref(true);
const inputVal = ref('');
const numLength = computed(() => {
  return [isLargeLetter.value, isSmallLetter.value, isNumber.value, isSpecSymbol.value,isLength.value].filter(Boolean).length;
})
const charCount = computed(() => {
  return inputVal.value.length;
})

const isLargeLetter = ref(false);
const isSmallLetter = ref(false);
const isNumber = ref(false);
const isSpecSymbol = ref(false);
const isLength =ref(false);

// input改变
const changeInput = (event)=>{
  const specialChars = "()`!@#$%^&*_-+=|{}[]:;'<>,.?";
  const escapedSpecialChars = specialChars.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
  let key = event.target.value;
  if(!key){
    isLength.value = false;
    isLargeLetter.value = false;
    isSmallLetter.value = false;
    isNumber.value = false;
    isSpecSymbol.value = false;
  }
  // 长度
  if (key.length > 16 && key.length < 256) {
    isLength.value = true;
  }else{
    isLength.value = false;
  }
  // 数字
  if (/\d/.test(key)) {
    isNumber.value = true;
  }else{
    isNumber.value = false;
  }
  // 小写
  if (/[a-z]/.test(key)) {
    isSmallLetter.value = true;
  }else{
    isSmallLetter.value = false;
  }
  // 大写
  if (/[A-Z]/.test(key)) {
    isLargeLetter.value = true;
  }else{
    isLargeLetter.value = false;
  }
  // 特殊字符
  if (new RegExp(`[${escapedSpecialChars}]`).test(key)) {
    isSpecSymbol.value = true;
  }else{
    isSpecSymbol.value = false;
  }

}
const emits = defineEmits(['clickReturn'])
const clickReturn = ()=>{
  emits('close');
}
onMounted(() => {});