当前位置：首页 > 前端教程

elementui密码

2026-03-05 21:02:46前端教程

密码输入框组件

Element UI 提供了 el-input 组件来实现密码输入框功能。通过设置 type="password" 属性，可以将输入框类型切换为密码模式，隐藏用户输入内容。

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

显示密码切换功能

需要实现密码显示/隐藏切换功能时，可以结合 show-password 属性。该属性会在输入框右侧添加眼睛图标，点击可切换密码可见性。

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

密码强度验证

结合表单验证规则可实现密码强度校验。以下示例要求密码长度6-20位，且必须包含字母和数字：

rules: {
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在6到20个字符', trigger: 'blur' },
    { pattern: /^(?=.*[A-Za-z])(?=.*\d).+$/, 
      message: '密码必须包含字母和数字' }
  ]
}

自定义密码输入样式

通过插槽和CSS可以自定义密码输入框样式。以下示例添加了前缀图标和自定义样式：

<el-input 
  type="password"
  v-model="password"
  class="custom-password"
  placeholder="请输入密码">
  <template #prefix>
    <el-icon><lock /></el-icon>
  </template>
</el-input>

<style>
.custom-password .el-input__inner {
  padding-left: 40px;
  border-radius: 4px;
}
</style>

密码框与确认密码验证

需要验证两次密码输入是否一致时，可使用自定义验证规则：

validatePass2: (rule, value, callback) => {
  if (value !== this.form.password) {
    callback(new Error('两次输入密码不一致'));
  } else {
    callback();
  }
}

密码复杂度提示

在用户输入时实时显示密码强度提示：

elementui密码

<el-progress 
  :percentage="passwordStrength"
  :color="colors"
  :show-text="false">
</el-progress>
<div>密码强度：{{ strengthText }}</div>

<script>
computed: {
  passwordStrength() {
    // 根据密码长度和复杂度计算强度值
    let strength = 0;
    if (this.password.length > 0) strength += 20;
    if (/\d/.test(this.password)) strength += 20;
    if (/[a-zA-Z]/.test(this.password)) strength += 20;
    if (/[^a-zA-Z0-9]/.test(this.password)) strength += 20;
    if (this.password.length > 8) strength += 20;
    return strength;
  }
}
</script>