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,12 +213,14 @@ const AddUserModal = props => {
       destroyOnClose
       afterClose={() => {
         addUserForm.resetFields();
+        setPasswordLevel('弱');
       }}
       onOk={submitAddUser}
       okText="确认"
       cancelText="取消"
     >
-      <Form form={addUserForm} labelCol={{ span: 4 }}>
+      <div className={styles.modalContent}>
+        <Form form={addUserForm} labelCol={{ span: 4 }} onFieldsChange={changeValue}>
           <Form.Item
             hasFeedback
             name="loginName"
@@ -200,7 +247,7 @@ const AddUserModal = props => {
               { required: true },
             ]}
           >
-          <Input placeholder="请输入账号密码（6~16位）" maxlength="16" />
+            <Input placeholder="请输入账号密码（6~16位）" maxlength="16" suffix={passwordLevel} />
           </Form.Item>
           <Form.Item
             hasFeedback
@@ -247,6 +294,7 @@ const AddUserModal = props => {
           <TreeSelect {...tProps} showSearch treeDefaultExpandAll />
         </Form.Item> */}
         </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>