fix: 添加用户密码添加强度验证

src/pages/userCenter/userManage/AddUserModal.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Modal, Form, Input, notification, message, TreeSelect } from 'antd';
 import { addUser, GetUserRelationListNew } from '@/services/userManage/api';
 import { ok } from '../../../assets/images/icons/ok.svg';
+import styles from './AddUserModal.less';
 const { SHOW_CHILD } = TreeSelect;
 
 const AddUserModal = props => {
@@ -15,7 +16,7 @@ const AddUserModal = props => {
   ); // 邮箱
   const [value, setValue] = useState(['0-1-1']);
   const [treeData, setTreeData] = useState([]);
-
+  const [passwordLevel, setPasswordLevel] = useState('弱'); // 密码等级
   const onChange = newValue => {
     console.log('onChange ', value);
     setValue(newValue);
@@ -140,6 +141,50 @@ const AddUserModal = props => {
         });
     }
   };
+  // 密码强度验证
+  const changeValue = changedFields => {
+    if (changedFields[0].name[0] === 'password') {
+      // console.log(changedFields[0].value);
+      checkStrong(changedFields[0].value);
+      // console.log(checkStrong(changedFields[0].value));
+    }
+  };
+  const checkStrong = sValue => {
+    let modes = 0;
+    // 正则表达式验证符合要求的
+    if (sValue.length < 1) return modes;
+    if (/\d/.test(sValue)) modes++; // 数字
+    if (/[a-z]/.test(sValue)) modes++; // 小写
+    if (/[A-Z]/.test(sValue)) modes++; // 大写
+    if (/[_\W]/.test(sValue)) modes++; // 特殊字符
+    console.log(modes, 'modes');
+    // 逻辑处理
+    // eslint-disable-next-line default-case
+    switch (modes) {
+      case 1:
+        setPasswordLevel('弱');
+        // return 1;
+        break;
+      case 2:
+        setPasswordLevel('弱');
+        break;
+      case 3:
+        if (sValue.length > 8) {
+          setPasswordLevel('中');
+        } else {
+          setPasswordLevel('弱');
+        }
+        break;
+      case 4:
+        if (sValue.length < 10) {
+          setPasswordLevel('中');
+        } else {
+          setPasswordLevel('强');
+        }
+
+        break;
+    }
+  };
   const title = (
     <span>
       在<span style={{ fontWeight: 'bold', color: 'rgb(24, 144, 255)' }}>【{orgTitle1}】</span>
@@ -168,85 +213,88 @@ const AddUserModal = props => {
       destroyOnClose
       afterClose={() => {
         addUserForm.resetFields();
+        setPasswordLevel('弱');
       }}
       onOk={submitAddUser}
       okText="确认"
       cancelText="取消"
     >
-      <Form form={addUserForm} labelCol={{ span: 4 }}>
-        <Form.Item
-          hasFeedback
-          name="loginName"
-          label="登录名称"
-          rules={[
-            {
-              pattern: /^[a-zA-Z0-9_]{0,}$/,
-              message: '长度小于16位，支持字母与数字，允许下划线',
-            },
-            { required: true },
-          ]}
-        >
-          <Input placeholder="请输入登录名称（小于16位）" maxLength="16" />
-        </Form.Item>
-        <Form.Item
-          hasFeedback
-          name="password"
-          label="账号密码"
-          rules={[
-            {
-              pattern: /^[a-zA-Z0-9_]{6,16}$/,
-              message: '长度6-16位，支持字母与数字，允许下划线',
-            },
-            { required: true },
-          ]}
-        >
-          <Input placeholder="请输入账号密码（6~16位）" maxlength="16" />
-        </Form.Item>
-        <Form.Item
-          hasFeedback
-          name="userName"
-          label="用户姓名"
-          rules={[
-            { required: true },
-            {
-              pattern: /^[A-Za-z0-9_\u4e00-\u9fa5]+$/,
-              message: '长度小于16位，支持字母、中文与数字，允许下划线',
-            },
-          ]}
-        >
-          <Input placeholder="请输入用户姓名（小于16位）" maxLength="16" />
-        </Form.Item>
-        <Form.Item
-          hasFeedback
-          name="phone"
-          label="手机号码"
-          rules={[
-            { required: true },
-            {
-              pattern: new RegExp(/^1[0-9]{10}$/),
-              message: '请输入正确的手机号码！',
-            },
-          ]}
-        >
-          <Input placeholder="请输入手机号码" maxlength="11" autoComplete="off" />
-        </Form.Item>
-        <Form.Item
-          hasFeedback
-          name="email"
-          label="电子邮箱"
-          rules={[
-            {
-              type: 'email',
-              message: '请输入正确的电子邮箱！',
-            },
-          ]}
-        >
-          <Input placeholder="请输入电子邮箱" autoComplete="off" />
-        </Form.Item>
-        {/* <Form.Item name="stationList" label="关联站点" rules={[{ required: true }]}>
+      <div className={styles.modalContent}>
+        <Form form={addUserForm} labelCol={{ span: 4 }} onFieldsChange={changeValue}>
+          <Form.Item
+            hasFeedback
+            name="loginName"
+            label="登录名称"
+            rules={[
+              {
+                pattern: /^[a-zA-Z0-9_]{0,}$/,
+                message: '长度小于16位，支持字母与数字，允许下划线',
+              },
+              { required: true },
+            ]}
+          >
+            <Input placeholder="请输入登录名称（小于16位）" maxLength="16" />
+          </Form.Item>
+          <Form.Item
+            hasFeedback
+            name="password"
+            label="账号密码"
+            rules={[
+              {
+                pattern: /^[a-zA-Z0-9_]{6,16}$/,
+                message: '长度6-16位，支持字母与数字，允许下划线',
+              },
+              { required: true },
+            ]}
+          >
+            <Input placeholder="请输入账号密码（6~16位）" maxlength="16" suffix={passwordLevel} />
+          </Form.Item>
+          <Form.Item
+            hasFeedback
+            name="userName"
+            label="用户姓名"
+            rules={[
+              { required: true },
+              {
+                pattern: /^[A-Za-z0-9_\u4e00-\u9fa5]+$/,
+                message: '长度小于16位，支持字母、中文与数字，允许下划线',
+              },
+            ]}
+          >
+            <Input placeholder="请输入用户姓名（小于16位）" maxLength="16" />
+          </Form.Item>
+          <Form.Item
+            hasFeedback
+            name="phone"
+            label="手机号码"
+            rules={[
+              { required: true },
+              {
+                pattern: new RegExp(/^1[0-9]{10}$/),
+                message: '请输入正确的手机号码！',
+              },
+            ]}
+          >
+            <Input placeholder="请输入手机号码" maxlength="11" autoComplete="off" />
+          </Form.Item>
+          <Form.Item
+            hasFeedback
+            name="email"
+            label="电子邮箱"
+            rules={[
+              {
+                type: 'email',
+                message: '请输入正确的电子邮箱！',
+              },
+            ]}
+          >
+            <Input placeholder="请输入电子邮箱" autoComplete="off" />
+          </Form.Item>
+          {/* <Form.Item name="stationList" label="关联站点" rules={[{ required: true }]}>
           <TreeSelect {...tProps} showSearch treeDefaultExpandAll />
         </Form.Item> */}
-      </Form>
+        </Form>
+      </div>
     </Modal>
   );
 };

src/pages/userCenter/userManage/AddUserModal.less

+.modalContent {
+  width: 100%;
+  height: 100%;
+
+  .ant-form-item-feedback-icon {
+    margin-left: 10px;
+  }
+}
\ No newline at end of file

src/pages/userCenter/userManage/ChangePasswordModal.jsx

 /* eslint-disable import/no-unresolved */
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Modal, Form, Input, notification, message } from 'antd';
 import { updateUserPassword } from '@/services/userManage/api';
 
 const ChangePasswordModal = props => {
   const { visible, currentUser, currentSelectOrg, submitSearchUser, onSelect, onCancel } = props;
   const [passwordForm] = Form.useForm(); // 修改密码
-
+  const [newPasswordLevel, setNewPasswordLevel] = useState('弱');
+  const [passwordConfirmLevel, setPasswordConfirmLevel] = useState('弱');
   useEffect(() => {
     console.log(currentUser);
     if (visible) {
@@ -80,6 +81,43 @@ const ChangePasswordModal = props => {
       });
     }
   };
+  const changeValue = changedFields => {
+    if (changedFields[0].name[0] === 'newPassword') {
+      setNewPasswordLevel(checkStrong(changedFields[0].value));
+    }
+    if (changedFields[0].name[0] === 'passwordConfirm') {
+      setPasswordConfirmLevel(checkStrong(changedFields[0].value));
+    }
+  };
+  const checkStrong = sValue => {
+    let modes = 0;
+    // 正则表达式验证符合要求的
+    if (sValue.length < 1) return modes;
+    if (/\d/.test(sValue)) modes++; // 数字
+    if (/[a-z]/.test(sValue)) modes++; // 小写
+    if (/[A-Z]/.test(sValue)) modes++; // 大写
+    if (/[_\W]/.test(sValue)) modes++; // 特殊字符
+    console.log(modes, 'modes');
+    // 逻辑处理
+    // eslint-disable-next-line default-case
+    switch (modes) {
+      case 1:
+        return '弱';
+      case 2:
+        return '弱';
+      case 3:
+        if (sValue.length > 8) {
+          return '中';
+        }
+        return '弱';
+
+      case 4:
+        if (sValue.length < 10) {
+          return '中';
+        }
+        return '强';
+    }
+  };
   const title = (
     <span>
       修改用户
@@ -110,7 +148,7 @@ const ChangePasswordModal = props => {
       okText="确认"
       cancelText="取消"
     >
-      <Form form={passwordForm} labelCol={{ span: 4 }}>
+      <Form form={passwordForm} labelCol={{ span: 4 }} onFieldsChange={changeValue}>
         <Form.Item name="oldPassword" label="原始密码">
           <Input disabled />
         </Form.Item>
@@ -125,7 +163,12 @@ const ChangePasswordModal = props => {
             { required: true },
           ]}
         >
-          <Input.Password placeholder="请输入新密码" autoComplete="off" maxLength="16" />
+          <Input
+            placeholder="请输入新密码"
+            autoComplete="off"
+            maxLength="16"
+            suffix={newPasswordLevel}
+          />
         </Form.Item>
         <Form.Item
           name="passwordConfirm"
@@ -138,7 +181,12 @@ const ChangePasswordModal = props => {
             { required: true },
           ]}
         >
-          <Input.Password placeholder="再次确认新密码" autoComplete="off" maxLength="16" />
+          <Input
+            placeholder="再次确认新密码"
+            autoComplete="off"
+            maxLength="16"
+            suffix={passwordConfirmLevel}
+          />
         </Form.Item>
       </Form>
     </Modal>