vue实现密码框的包

Vue 密码框实现方案

使用原生 HTML 和 Vue 双向绑定

通过 v-model 绑定输入值，结合 type="password" 实现基础密码框功能：

<template>
  <div>
    <label for="password">密码：</label>
    <input 
      id="password"
      type="password"
      v-model="password"
      placeholder="请输入密码"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      password: ''
    }
  }
}
</script>

添加显示/隐藏密码切换功能

通过动态切换 input 的 type 属性实现密码可见性控制：

<template>
  <div class="password-field">
    <input
      :type="showPassword ? 'text' : 'password'"
      v-model="password"
      placeholder="请输入密码"
    />
    <button @click="showPassword = !showPassword">
      {{ showPassword ? '隐藏' : '显示' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      password: '',
      showPassword: false
    }
  }
}
</script>

使用第三方组件库

Element UI 密码框

<template>
  <el-input
    v-model="password"
    placeholder="请输入密码"
    show-password
  />
</template>

<script>
export default {
  data() {
    return {
      password: ''
    }
  }
}
</script>

Vuetify 密码框

<template>
  <v-text-field
    v-model="password"
    :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
    :type="showPassword ? 'text' : 'password'"
    label="密码"
    @click:append="showPassword = !showPassword"
  />
</template>

<script>
export default {
  data() {
    return {
      password: '',
      showPassword: false
    }
  }
}
</script>

自定义密码强度验证

结合正则表达式实现密码强度验证：

<template>
  <div>
    <input
      type="password"
      v-model="password"
      @input="checkStrength"
      placeholder="请输入密码"
    />
    <div :class="['strength', strengthClass]">
      强度: {{ strengthText }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      password: '',
      strength: 0
    }
  },
  computed: {
    strengthClass() {
      return ['weak', 'medium', 'strong'][this.strength]
    },
    strengthText() {
      return ['弱', '中', '强'][this.strength]
    }
  },
  methods: {
    checkStrength() {
      let score = 0
      if (this.password.length > 6) score++
      if (/\d/.test(this.password)) score++
      if (/[A-Z]/.test(this.password)) score++
      this.strength = Math.min(2, score)
    }
  }
}
</script>

<style>
.strength { margin-top: 5px; }
.weak { color: red; }
.medium { color: orange; }
.strong { color: green; }
</style>

密码输入规则验证

使用 Vue 的表单验证功能：

<template>
  <form @submit.prevent="submitForm">
    <input
      type="password"
      v-model="form.password"
      @blur="validatePassword"
    />
    <span v-if="errors.password">{{ errors.password }}</span>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        password: ''
      },
      errors: {
        password: ''
      }
    }
  },
  methods: {
    validatePassword() {
      if (this.form.password.length < 8) {
        this.errors.password = '密码长度至少8位'
      } else if (!/[A-Z]/.test(this.form.password)) {
        this.errors.password = '必须包含大写字母'
      } else {
        this.errors.password = ''
      }
    },
    submitForm() {
      this.validatePassword()
      if (!this.errors.password) {
        // 提交表单逻辑
      }
    }
  }
}
</script>