React實現基于Antd密碼強度校驗組件示例詳解

更新時間：2023年01月17日 11:42:01 作者：白霧茫茫丶

這篇文章主要為大家介紹了React實現基于Antd密碼強度校驗組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

最近在開發(fā) Nest 和 Umi 技術棧的個人項目，在用戶管理模塊需要用到一個密碼強度校驗組件，在網上尋找一方資料，沒有找到自己想要的，特此自己造輪子！

效果預覽

組件思想

既然是密碼強度校驗，那么強度就必須有個梯度，這個時候就必須找到一個合適的效果。
我們有兩種方向：① 組件庫找個合適的 UI ， ② 自己開發(fā)造輪子
經過一番摸索， Antd 的 Progress 組件進入了我的視野：

于是我決定基于這個組件改造一番！

組件開發(fā)

在目錄 /src/components 新建 StrengthMeter/index.tsx 文件，開發(fā)基本結構。

/*
 * @Description: 密碼強度組件
 * @Version: 2.0
 * @Author: Cyan
 * @Date: 2023-01-09 17:15:19
 * @LastEditors: Cyan
 * @LastEditTime: 2023-01-16 15:40:45
 */
import type { FC } from 'react'
import { Progress, Form, Row, Col } from 'antd';
import { ProFormText } from '@ant-design/pro-components'; // antd 高級組件
import zxcvbn from 'zxcvbn'; // 密碼強度校驗
const StrengthMeter: FC = () => {
  // 獲取上下文 form 實例
  const form = Form.useFormInstance();
  // 監(jiān)聽密碼的改變
  const password = Form.useWatch('password', form);
  /**
   * @description: 監(jiān)聽密碼強度相應變化
   * @param {string} password
   * @return {*}
   * @author: Cyan
   */
  const watchStrength = (password: string): number => {
    const analysisValue = zxcvbn(password)
    // score得分只有0~4，且只有整數范圍并沒有小數
    return (analysisValue.score + 1) * 20
  }
  return (
    <>
      {/* 密碼 */}
      <ProFormText.Password
        label="密碼"
        name="password"
        rules={[{ required: true, min: 6, max: 12, message: "請輸入密碼" }]}
      />
      {/* 確認密碼 */}
      <ProFormText.Password
        label="確認密碼"
        name="confirmPassword"
        fieldProps={{ visibilityToggle: false }}
        rules={[
          { required: true, message: "請輸入確認密碼" },
          ({ getFieldValue }) => ({
            validator(_, value) {
              if (!value || getFieldValue('password') === value) {
                return Promise.resolve();
              }
              return Promise.reject(new Error("兩次密碼輸入不一致"));
            },
          })
        ]}
      />
      {/* 顯示密碼強度 */}
      <Progress
        percent={password ? watchStrength(password) : 0}
        steps={5}
        strokeColor={['#e74242', '#EFBD47', '#ffa500', '#1bbf1b', '#008000']}
        showInfo={false}
      />
      <Row justify="space-around">
        {
          ['非常弱', '弱', '一般', '強', '非常強'].map(value => <Col span={4} key={value}>{value}  </Col>)
        }
      </Row>
    </>
  )
}
export default StrengthMeter

此時的效果是這樣的：

由于 Progress 的 ant-progress-steps-item 無法自動撐開，我們需要新建一個 index.module.less 文件做樣式穿透:

.process-steps{
  width:100%;
  text-align: center;
  :global(.ant-progress){
    width:100%
  }
  :global(.ant-progress .ant-progress-steps-item){
    width:calc(20% - 2px) !important
  }
}

然后引入樣式并綁定類名：

import styles from './index.module.less'
<div className={styles['process-steps']}>
    <Progress
      percent={password ? watchStrength(password) : 0}
      steps={5}
      strokeColor={['#e74242', '#EFBD47', '#ffa500', '#1bbf1b', '#008000']}
      showInfo={false}
    />
</div>
<Row justify="space-around" className={styles['process-steps']}>
    {
      ['非常弱', '弱', '一般', '強', '非常強'].map(value => <Col span={4} key={value}>{value}</Col>)
    }
</Row>

這時候就能得到我們想要的效果了，接下來我們要校驗密碼強度。
3. 這里我們要用到一個庫：zxcvbn，頁面引入

import zxcvbn from 'zxcvbn';

zxcvbn 是個函數，接收一個參數，參數就是字符串密碼。

zxcvbn("abc123456");

該函數返回一個對象，其中與密碼強度相關的屬性有：guesses、guesses_log10、score。

那么這三個屬性，我們應該怎么選擇呢？

①: guesses 值很大，不利于我們判斷。

②: guesses_log10 的值越大越安全，根據測試，值在 12 以上就很安全了。

③: score 的取值范圍只有整數 0~4，值越大越安全。

如果業(yè)務考慮的場景比較多，建議使用 guesses_log10，這里我們封裝使用 score。

4. 使用 Form.useWatch 監(jiān)聽 password 的變化：

// 獲取上下文 form 實例
const form = Form.useFormInstance();
// 監(jiān)聽密碼的改變
const password = Form.useWatch('password', form);

編寫一個函數解析 password ：

const watchStrength = (password: string): number => {
    const analysisValue = zxcvbn(password)
    // score得分只有0~4，且只有整數范圍并沒有小數
    return (analysisValue.score + 1) * 20
}

綁定到 Progress 組件：

<Progress
  percent={password ? watchStrength(password) : 0}
  steps={5}
  strokeColor={['#e74242', '#EFBD47', '#ffa500', '#1bbf1b', '#008000']}
  showInfo={false}
/>

到這里，我們的任務就完成了，我們一起看看實際效果吧：