Password

概述

Password密码输入框组件，继承自Input，底层input type固定为password，输入内容默认以掩码显示。组件默认在输入框前显示lock图标。

示例

声明一个密码字段只需要指定widget: 'password'：

const form = document.querySelector('#form');
form.state = {
    password: configurable('', {
        label: '密码',
        widget: 'password',
        placeholder: '请输入密码',
    }),
};

loading

指南

长度校验

配合required、minLength、maxLength实现基础的长度校验：

form.state = {
    password: configurable('', {
        label: '密码',
        widget: 'password',
        required: true, 
        minLength: 6, 
        maxLength: 20, 
        help: '必填，6-20个字符',
    }),
};

强度校验

通过validate自定义校验函数，配合errorMessage指定校验失败时的错误提示：

form.state = {
    strongPassword: configurable('', {
        label: '强密码',
        widget: 'password',
        required: true,
        validate: (value: string) => {
            if (!value) return false;
            // 必须同时包含大写字母、小写字母和数字
            return /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/.test(value);
        },
        errorMessage: '密码必须包含大小写字母和数字', 
    }),
};

属性

继承Input全部属性，无自有属性。

注意事项

• 组件默认显示lock前缀图标，可通过icon覆盖（见Input）。
• 完整属性（required、minLength、maxLength、validate等）见Input。
• 密码强度等复杂规则建议用validate函数实现，长度规则优先使用minLength/maxLength以获得浏览器原生支持。