密码正则校验

src/components/user-info.vue

@@ -1,53 +1,59 @@
 <template>
-  <div class="user-info-part">
-    <div class="header-box">
-      <h3>个人信息</h3>
-      <el-icon @click="close">
-        <Close/>
-      </el-icon>
+    <div class="user-info-part">
+        <div class="header-box">
+            <h3>个人信息</h3>
+            <el-icon @click="close">
+                <Close/>
+            </el-icon>
+        </div>
+        <div class="custom-tabs">
+            <div class="tabs-item" v-for="(item, index) in ['基础信息', '安全信息']" :key="item"
+                 :class="{ 'active': tabActive === index }" @click="tabActive = index">{{ item }}
+            </div>
+        </div>
+        <el-form ref="formRef" :model="formData" :rules="rules" label-width="60">
+            <template v-if="tabActive === 0">
+                <el-upload action="#" :limit="1" :http-request="handleUpload" ref="uploadRef"
+                           :show-file-list="false" :on-success="handleAvatarSuccess"
+                           :before-upload="beforeAvatarUpload">
+                    <img v-if="formData.avatar" :src="'/api' + formData.avatar" class="avatar"/>
+                    <img v-else src="@/assets/imgs/home/avatar.png" class="avatar"/>
+                </el-upload>
+                <el-form-item label="用户名" prop="account">
+                    <el-input v-model="formData.account" disabled></el-input>
+                </el-form-item>
+                <el-form-item label="电话" prop="phone">
+                    <el-input v-model="formData.phone" placeholder="请输入手机号"></el-input>
+                </el-form-item>
+                <el-form-item label="姓名" prop="name">
+                    <el-input v-model="formData.name" placeholder="请输入姓名"></el-input>
+                </el-form-item>
+                <el-form-item label="邮箱" prop="mailbox">
+                    <el-input v-model="formData.mailbox" placeholder="请输入邮箱"></el-input>
+                </el-form-item>
+            </template>
+            <template v-else>
+                <el-form-item label="密码" prop="password" label-width="100">
+                    <el-input v-model="formData.password" type="password" show-password
+                              placeholder="请输入密码"></el-input>
+                </el-form-item>
+                <el-form-item label="新密码" prop="newPassword" label-width="100">
+                    <el-input v-model="formData.newPassword" type="password" show-password
+                              placeholder="请输入新密码"></el-input>
+                </el-form-item>
+                <el-form-item label="确认密码" prop="confirmPassword" label-width="100">
+                    <el-input v-model="formData.confirmPassword" type="password" show-password
+                              placeholder="请输入新密码"></el-input>
+                </el-form-item>
+            </template>
+        </el-form>
+        <div class="submit-box">
+            <el-button type="primary" @click="submitForm">{{
+                    tabActive === 0 ? '更新个人信息' : '修改密码'
+                }}
+            </el-button>
+        </div>
     </div>
-    <div class="custom-tabs">
-      <div class="tabs-item" v-for="(item, index) in ['基础信息', '安全信息']" :key="item"
-           :class="{ 'active': tabActive === index }" @click="tabActive = index">{{ item }}
-      </div>
-    </div>
-    <el-form ref="formRef" :model="formData" :rules="rules" label-width="60">
-      <template v-if="tabActive === 0">
-        <el-upload action="#" :limit="1" :http-request="handleUpload" ref="uploadRef"
-                   :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
-          <img v-if="formData.avatar" :src="'/api' + formData.avatar" class="avatar"/>
-          <img v-else src="@/assets/imgs/home/avatar.png" class="avatar"/>
-        </el-upload>
-        <el-form-item label="用户名" prop="account">
-          <el-input v-model="formData.account" disabled></el-input>
-        </el-form-item>
-        <el-form-item label="电话" prop="phone">
-          <el-input v-model="formData.phone" placeholder="请输入手机号"></el-input>
-        </el-form-item>
-        <el-form-item label="姓名" prop="name">
-          <el-input v-model="formData.name" placeholder="请输入姓名"></el-input>
-        </el-form-item>
-        <el-form-item label="邮箱" prop="mailbox">
-          <el-input v-model="formData.mailbox" placeholder="请输入邮箱"></el-input>
-        </el-form-item>
-      </template>
-      <template v-else>
-        <el-form-item label="密码" prop="password" label-width="100">
-          <el-input v-model="formData.password" type="password" show-password placeholder="请输入密码"></el-input>
-        </el-form-item>
-        <el-form-item label="新密码" prop="newPassword" label-width="100">
-          <el-input v-model="formData.newPassword" type="password" show-password placeholder="请输入新密码"></el-input>
-        </el-form-item>
-        <el-form-item label="确认密码" prop="confirmPassword" label-width="100">
-          <el-input v-model="formData.confirmPassword" type="password" show-password
-                    placeholder="请输入新密码"></el-input>
-        </el-form-item>
-      </template>
-    </el-form>
-    <div class="submit-box">
-      <el-button type="primary" @click="submitForm">{{ tabActive === 0 ? '更新个人信息' : '修改密码' }}</el-button>
-    </div>
-  </div>
 </template>
 
 <script lang='ts' setup>
@@ -57,6 +63,7 @@ import {ElMessage} from 'element-plus'
 import {editPassword, getUserInfo, updateUserInfo} from "@/api/user";
 import {handleHttpUpload} from "@/api/file-upload";
 import {useUserStore} from "@/stores/user-info-store";
+import {REGEXP} from "@/enum/log-enum";
 
 const emit = defineEmits(['close'])
 
@@ -66,199 +73,199 @@ const formRef = ref()
 const uploadRef = ref()
 
 onMounted(() => {
-  getUserInfo().then((res: any) => {
-    if (res.data) {
-      formData.value.account = res.data.sysUser.username
-      formData.value.name = res.data.sysUser.name
-      formData.value.phone = res.data.sysUser.phone
-      formData.value.mailbox = res.data.sysUser.email
-      formData.value.avatar = res.data.sysUser.avatar
-    }
-  })
+    getUserInfo().then((res: any) => {
+        if (res.data) {
+            formData.value.account = res.data.sysUser.username
+            formData.value.name = res.data.sysUser.name
+            formData.value.phone = res.data.sysUser.phone
+            formData.value.mailbox = res.data.sysUser.email
+            formData.value.avatar = res.data.sysUser.avatar
+        }
+    })
 })
 
 const validatePassword = (rule: any, value: any, callback: any) => {
-  if (formData.value.newPassword !== formData.value.confirmPassword) {
-    callback(new Error('两次密码不一致'))
-  } else {
-    callback()
-  }
+    if (formData.value.newPassword !== formData.value.confirmPassword) {
+        callback(new Error('两次密码不一致'))
+    } else {
+        callback()
+    }
 }
 
 //自定义校验规则函数
 const validatorPassword = (rule: any, value: any, callback: any) => {
-  if (value.length >= 6) {
-    callback();
-  } else {
-    callback(new Error('密码长度至少6位'));
-  }
+    if (!(new RegExp(REGEXP.PASSWORD).test(value))) {
+        callback("8~16位字母或数字（区分大小写）");
+    } else {
+        callback()
+    }
 }
 
 const validatorPhone = (rule: any, value: any, callback: any) => {
-  var isPhone = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
 
+    if (value.indexOf('****') >= 0) {
+        return callback().trim();
+    }
 
-  if (value.indexOf('****') >= 0) {
-    return callback().trim();
-  }
-
-  if (!isPhone.test(value)) {
-    callback(new Error('请输入合法手机号'));
-  } else {
-    callback();
-  }
+    if (!new RegExp(REGEXP.PHONE).test(value)) {
+        callback(new Error('请输入合法手机号'));
+    } else {
+        callback();
+    }
 }
 
 const rules = reactive({
-  phone: [
-    {required: true, validator: validatorPhone, trigger: 'blur'},
-  ],
-  name: [
-    {required: true, message: '请输入姓名', trigger: 'blur'},
-  ],
-  mailbox: [
-    {type: 'email', message: '邮箱格式不正确', trigger: ['blur', 'change']},
-  ],
-  password: [
-    {required: true, validator: validatorPassword, trigger: 'change'},
-  ],
-  newPassword: [
-    {required: true, validator: validatorPassword, trigger: 'change'},
-    //{ validator: validatePassword, trigger: 'blur' }
-  ],
-  confirmPassword: [
-    {required: true, message: '请输入密码', trigger: 'change'},
-    {validator: validatePassword, trigger: 'blur'}
-  ]
+    phone: [
+        {required: true, validator: validatorPhone, trigger: 'blur'},
+    ],
+    name: [
+        {required: true, message: '请输入姓名', trigger: 'blur'},
+    ],
+    mailbox: [
+        {type: 'email', message: '邮箱格式不正确', trigger: ['blur', 'change']},
+    ],
+    password: [
+        {required: true, validator: validatorPassword, trigger: 'change'},
+    ],
+    newPassword: [
+        {required: true, validator: validatorPassword, trigger: 'change'},
+        //{ validator: validatePassword, trigger: 'blur' }
+    ],
+    confirmPassword: [
+        {required: true, message: '请输入密码', trigger: 'change'},
+        {required: true, validator: validatorPassword, trigger: 'change'},
+        {validator: validatePassword, trigger: 'blur'}
+    ]
 })
 const tabActive = ref(0)
 const formData = ref({
-  avatar: '',
-  account: "",
-  phone: '',
-  name: "",
-  mailbox: '',
-  password: '',
-  newPassword: '',
-  confirmPassword: ''
+    avatar: '',
+    account: "",
+    phone: '',
+    name: "",
+    mailbox: '',
+    password: '',
+    newPassword: '',
+    confirmPassword: ''
 })
 
 const close = () => {
-  emit('close')
+    emit('close')
 }
+
 function handleAvatarSuccess(uploadFile: any) {
 }
 
 function handleUpload(options: any) {
-  handleHttpUpload(options).then((res: any) => {
-    if (res && res.code == 0) {
-      formData.value.avatar = res.data.url
-      const param = {
-        avatar: formData.value.avatar,
-        username: formData.value.account
-      }
-      updateUserInfo(param).then((res: any) => {
-        uploadRef.value.clearFiles();
-        if (res && res.code != 0) {
-          ElMessage.error(res.msg)
+    handleHttpUpload(options).then((res: any) => {
+        if (res && res.code == 0) {
+            formData.value.avatar = res.data.url
+            const param = {
+                avatar: formData.value.avatar,
+                username: formData.value.account
+            }
+            updateUserInfo(param).then((res: any) => {
+                uploadRef.value.clearFiles();
+                if (res && res.code != 0) {
+                    ElMessage.error(res.msg)
+                }
+            })
+        } else {
+            ElMessage.error('图片格式错误')
         }
-      })
-    } else {
-      ElMessage.error('图片格式错误')
-    }
 
-  }).catch(err => {
-    ElMessage.error('图片格式错误')
-    options.onError(err);
-  })
+    }).catch(err => {
+        ElMessage.error('图片格式错误')
+        options.onError(err);
+    })
 }
 
 const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
-  if (rawFile.type !== 'image/jpeg') {
-    ElMessage.error('图片必须为jpg格式!')
-    return false
-  } else if (rawFile.size / 1024 / 1024 > 2) {
-    ElMessage.error('图片大小不得超过2MB!')
-    return false
-  }
-  return true
+    if (rawFile.type !== 'image/jpeg') {
+        ElMessage.error('图片必须为jpg格式!')
+        return false
+    } else if (rawFile.size / 1024 / 1024 > 2) {
+        ElMessage.error('图片大小不得超过2MB!')
+        return false
+    }
+    return true
 }
 const submitForm = async () => {
-  await formRef.value.validate((valid: any, fields: any) => {
-    if (valid) {
-      // console.log('submit!')
-      // 更改用户名
-      useUserStore().setlogin('name', formData.value.name)
-      if (tabActive.value == 0) {
-        const param = {
-          name: formData.value.name,
-          phone: formData.value.phone,
-          email: formData.value.mailbox,
-          username: formData.value.account
+    await formRef.value.validate((valid: any, fields: any) => {
+        if (valid) {
+            // console.log('submit!')
+            // 更改用户名
+            useUserStore().setlogin('name', formData.value.name)
+            if (tabActive.value == 0) {
+                const param = {
+                    name: formData.value.name,
+                    phone: formData.value.phone,
+                    email: formData.value.mailbox,
+                    username: formData.value.account
+                }
+                updateUserInfo(param).then((res: any) => {
+                    if (res && res.code == 0) {
+                        ElMessage.success('更新成功')
+                        close()
+                    } else {
+                        ElMessage.error(res.msg)
+                    }
+                })
+            } else {
+                editPassword({
+                    password: formData.value.password,
+                    newpassword1: formData.value.newPassword
+                }).then((res: any) => {
+                    if (res && res.code == 0) {
+                        formRef.value.resetFields(['password', 'newPassword', 'confirmPassword'])
+                        ElMessage.success("修改密码成功")
+                        close()
+                    } else {
+                        ElMessage.error(res.msg)
+                    }
+                })
+            }
+        } else {
+            // console.log('error submit!', fields)
         }
-        updateUserInfo(param).then((res: any) => {
-          if (res && res.code == 0) {
-            ElMessage.success('更新成功')
-            close()
-          } else {
-            ElMessage.error(res.msg)
-          }
-        })
-      } else {
-        editPassword({
-          password: formData.value.password,
-          newpassword1: formData.value.newPassword
-        }).then((res: any) => {
-          if (res && res.code == 0) {
-            formRef.value.resetFields(['password', 'newPassword', 'confirmPassword'])
-            ElMessage.success("修改密码成功")
-            close()
-          } else {
-            ElMessage.error(res.msg)
-          }
-        })
-      }
-    } else {
-      // console.log('error submit!', fields)
-    }
-  })
+    })
 }
 
 </script>
 
 <style lang='scss' scoped>
 .user-info-part {
-  width: 100%;
-  height: 100%;
-  padding: 30px;
-
-  .header-box {
     width: 100%;
-    height: 50px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    height: 100%;
+    padding: 30px;
 
-    h3 {
-      color: $main-color;
-      font-size: 20px;
+    .header-box {
+        width: 100%;
+        height: 50px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        h3 {
+            color: $main-color;
+            font-size: 20px;
+        }
+
+        .el-icon {
+            cursor: pointer;
+            color: #606266;
+        }
     }
 
-    .el-icon {
-      cursor: pointer;
-      color: #606266;
+    img.avatar {
+        width: 128px;
+        height: 148px;
+        object-fit: contain;
+        margin: 0 0 20px 60px;
     }
-  }
 
-  img.avatar {
-    width: 128px;
-    height: 148px;
-    object-fit: contain;
-    margin: 0 0 20px 60px;
-  }
-
-  .submit-box {
-    padding-left: 60px;
-  }
+    .submit-box {
+        padding-left: 60px;
+    }
 }
 </style>

src/enum/log-enum.ts

@@ -5,3 +5,9 @@ export enum LogTypeEnum {
     MODIFY = "3",
     EXCEPTION = '4',
 }
+
+export enum REGEXP {
+    PASSWORD = '^[a-zA-Z0-9]{8,16}$',
+    ACCOUNT = '^[a-zA-Z0-9]{2,16}$',
+    PHONE = '^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$'
+}

src/views/login/login.vue

@@ -82,7 +82,8 @@
 
                 <el-form ref="registerFormRef" :model="registerParams" :rules="registerRules" label-width="100">
                     <el-form-item label="用户名" prop="username">
-                        <el-input v-model="registerParams.username" placeholder="请输入用户名2~16位字母或数字（区分大小写）"></el-input>
+                        <el-input v-model="registerParams.username"
+                                  placeholder="请输入用户名2~16位字母或数字（区分大小写）"></el-input>
                     </el-form-item>
                     <el-form-item label="密码" prop="password">
                         <el-input v-model="registerParams.password" type="password" show-password
@@ -143,6 +144,7 @@ import SliderVerify from "@/components/SliderVerify/index.vue";
 import * as loginApi from "@/api/login";
 import {Session} from "@/utils/storage";
 import * as hospitalApi from "@/api/hospital";
+import {REGEXP} from "@/enum/log-enum";
 
 
 //引入用户相关的小仓库
@@ -256,7 +258,7 @@ onMounted(() => {
 })
 
 function validatePass2(rule: any, value: any, callback: any) {
-    if (!(/^[a-zA-Z0-9]{8,16}$/.test(value))) {
+    if (!(new RegExp(REGEXP.PASSWORD).test(value))) {
         callback("8~16位字母或数字（区分大小写）");
     } else if (value !== registerParams.value.password) {
         callback(new Error('两次密码不一致'));
@@ -266,7 +268,7 @@ function validatePass2(rule: any, value: any, callback: any) {
 }
 
 function validateAccount(rule: any, value: any, callback: any) {
-    if (!(/^[a-zA-Z0-9]{2,16}$/.test(value))) {
+    if (!(new RegExp(REGEXP.ACCOUNT).test(value))) {
         callback("2~16位字母或数字（区分大小写）");
     } else {
         callback()

src/views/permissions-manage/form/doctor-form.vue

@@ -70,6 +70,7 @@ import {onMounted, reactive, ref, toRefs, watch} from 'vue'
 import {ElMessage, ElMessageBox} from 'element-plus'
 import {getRoleList} from "@/api/role";
 import {addUser, updateUI} from "@/api/user";
+import {REGEXP} from "@/enum/log-enum";
 
 const emit = defineEmits(['close', 'save'])
 
@@ -80,13 +81,10 @@ const props = defineProps({
 const roleOption = ref<any>([])
 
 const validatorPhone = (rule: any, value: any, callback: any) => {
-    var isPhone = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
-
-
     if (value.indexOf('****') >= 0) {
         return callback().trim();
     }
-    if (!isPhone.test(value)) {
+    if (!new RegExp(REGEXP.PHONE).test(value)) {
         callback(new Error('请输入合法手机号'));
     } else {
         callback();
@@ -149,7 +147,7 @@ defineExpose({
 })
 
 function validatePass2(rule: any, value: any, callback: any) {
-    if (!(/^[a-zA-Z0-9]{8,16}$/.test(value))) {
+    if (!(new RegExp(REGEXP.PASSWORD).test(value))) {
         callback("8~16位字母或数字（区分大小写）");
     } else if (value !== formData.value.password) {
         callback(new Error('两次密码不一致'));
@@ -159,7 +157,7 @@ function validatePass2(rule: any, value: any, callback: any) {
 }
 
 function validateAccount(rule: any, value: any, callback: any) {
-    if (!(/^[a-zA-Z0-9]{2,16}$/.test(value))) {
+    if (!(new RegExp(REGEXP.ACCOUNT).test(value))) {
         callback("2~16位字母或数字（区分大小写）");
     } else {
         callback()