feat: 优化

src/pages/password/index.jsx

 import React, { useRef, useState } from 'react';
-import { Form, Input, Button, Checkbox, Card, notification } from 'antd';
+import { Form, Input, Button, Checkbox, Card, notification, Popover } from 'antd';
 import { history } from 'umi';
 import { da } from 'date-fns/locale';
 import styles from './style.less';
@@ -51,32 +51,51 @@ const Password = props => {
     <div className={styles.div}>
       <Card className={styles.card}>
         <p>修改密码</p>
+
         <Form
           initialValues={{ remember: true }}
           onFinish={onFinish}
           autoComplete="off"
           className={styles.form}
           ref={formRef}
+          // labelCol={{
+          //   span: 16,
+          // }}
+          // wrapperCol={{
+          //   span: 16,
+          // }}
         >
           <Form.Item name="password" rules={[{ required: true, message: '请输入原密码!' }]}>
             <Input.Password placeholder="输入原密码" />
           </Form.Item>
-          <Form.Item
-            name="newPassword"
-            rules={[
-              { required: true, message: '请输入新密码！' },
-              {
-                message: '至少13最多18位且必须包含大小写字母、数字和特殊字符',
-                pattern: /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9]).{13,18}/,
-              },
-            ]}
+          <Popover
+            content="限13-18字符，包含大小写字母、数字和特殊字符"
+            placement="right"
+            trigger="hover"
           >
-            <Input.Password placeholder="输入新密码" maxLength={18} />
-          </Form.Item>
+            <Form.Item
+              name="newPassword"
+              validateFirst
+              rules={[
+                { required: true, message: '请输入新密码！' },
+                { min: 13, message: '密码最少13位' },
+                { max: 18, message: '密码最多18位' },
+                {
+                  message: '至少13位且必须包含大小写字母、数字和特殊字符',
+                  pattern: /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9]).{13,18}/,
+                },
+              ]}
+            >
+              <Input.Password placeholder="输入新密码" />
+            </Form.Item>
+          </Popover>
           <Form.Item
             name="newPasswordAgain"
+            validateFirst
             rules={[
               { required: true, message: '请输入新密码！' },
+              { min: 13, message: '密码最少13位' },
+              { max: 18, message: '密码最多18位' },
               {
                 message: '至少13位最多18位且必须包含大小写字母、数字和特殊字符',
                 pattern: /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9]).{13,18}/,
@@ -92,11 +111,10 @@ const Password = props => {
               }),
             ]}
           >
-            <Input.Password placeholder="输入新密码" maxLength={18} />
+            <Input.Password placeholder="输入新密码" />
           </Form.Item>
           <Form.Item className={styles.btn}>
             <Button type="primary" htmlType="submit" loading={loading}>
-              {' '}
               确认修改
             </Button>
             <Button type="primary" ghost onClick={goHome}>

src/pages/password/style.less

@@ -22,6 +22,7 @@
       &:first-child {
         width: 200px;
         margin-right: 10px;
+        margin-bottom: 10px;
       }
     }
   }