• 简体中文

      • PasswordInput

      PasswordInput 是 Antd Input.Password 的轻量封装。打开 checkStrength 后，会在输入框下方显示密码强度提示条。

      基本用法

      The strength bar is only a visual hint.
      import React, { useState } from 'react';
import { PasswordInput } from '@nocobase/client-v2';
import { Space, Typography } from 'antd';

export default function PasswordInputDemo() {
  const [value, setValue] = useState('');

  return (
    <Space direction="vertical" style={{ width: 320 }}>
      <PasswordInput
        value={value}
        checkStrength
        placeholder="Input password"
        onChange={(event) => setValue(event.target.value)}
      />
      <Typography.Text type="secondary">
        The strength bar is only a visual hint.
      </Typography.Text>
    </Space>
  );
}

      在表单里使用：

      import { PasswordInput } from '@nocobase/client-v2';

<Form.Item name="newPassword" label={t('New password')} rules={[{ required: true }]}>
  <PasswordInput autoComplete="new-password" checkStrength />
</Form.Item>;

      API

      参数类型默认值说明
      checkStrengthbooleanfalse是否显示密码强度提示条

      其他参数继承 Antd Input.Password。

      注意

      强度条只是界面提示，不是表单校验。弱密码能不能提交，仍然取决于 Form.Item.rules、服务端校验或单独的密码策略插件。