修改样式

src/layout/components/password-modal.vue

@@ -24,15 +24,12 @@
           placeholder="请输入旧密码"
         />
       </el-form-item>
-      <el-form-item label="新密码:" prop="newPassword">
+      <el-form-item label="新密码:" prop="newPassword" :show-message="false">
         <el-input
           show-password
           v-model="form.newPassword"
           placeholder="请输入新密码"
         />
-        <div class="password-rule-tip">
-          密码必须为数字、大小写字母以及特殊字符三者组合
-        </div>
       </el-form-item>
       <el-form-item label="确认密码:" prop="newPassword1">
         <el-input
@@ -41,6 +38,9 @@
           placeholder="请再次输入新密码"
         />
       </el-form-item>
+      <div class="password-rule-tip">
+        {{ passwordRuleMessage }}
+      </div>
     </el-form>
     <template v-slot:footer>
       <el-button @click="updateVisible(false)">取消</el-button>
@@ -56,9 +56,14 @@
       visible: Boolean
     },
     data() {
+      const passwordRuleMessage =
+        '密码必须为数字、大小写字母以及特殊字符三者组合';
+      const passwordPattern =
+        /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^\da-zA-Z\s])\S+$/;
       return {
         // 按钮 loading
         loading: false,
+        passwordRuleMessage,
         // 表单数据
         form: {
           oldPassword: '',
@@ -77,8 +82,16 @@
           newPassword: [
             {
               required: true,
-              message: '请输入新密码',
-              trigger: 'blur'
+              trigger: 'blur',
+              validator: (_rule, value, callback) => {
+                if (!value) {
+                  return callback(new Error('请输入新密码'));
+                }
+                if (!passwordPattern.test(value)) {
+                  return callback(new Error(passwordRuleMessage));
+                }
+                callback();
+              }
             }
           ],
           newPassword1: [
@@ -138,7 +151,7 @@
 
 <style scoped>
   .password-rule-tip {
-    margin-top: 4px;
+    margin: -14px 0 14px 82px;
     color: #f56c6c;
     font-size: 12px;
     line-height: 1.4;