密码强校验添加

Crunchy

2025-01-13 01d423865ae5eddf91f35c8526f5683c3b430870

 src/views/admin/user/info.vue

@@ -19,7 +19,7 @@
  <div class="app-container calendar-list-container">
    <basic-container>
      <template>
        <el-tabs v-model="switchStatus" @tab-click="switchTab" style="padding-left:20px">
                <el-tabs @tab-click="switchTab">
          <el-tab-pane label="信息管理" name="userManager"/>
          <el-tab-pane label="密码管理" name="passwordManager"/>
        </el-tabs>
@@ -27,95 +27,45 @@
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form
              v-if="switchStatus==='userManager'"
              ref="ruleForm2"
              :model="ruleForm2"
              :rules="rules2"
              label-width="100px"
              class="demo-ruleForm">
              <el-form-item
                label="用户名"
                prop="username">
                <el-input
                  v-model="ruleForm2.username"
                  type="text"
                  disabled/>
                        <el-form v-if="switchStatus === 'userManager'" ref="ruleForm2" :model="ruleForm2" :rules="rules2" label-width="100px" class="demo-ruleForm">
                            <el-form-item label="用户名" prop="username">
                                <el-input v-model="ruleForm2.username" type="text" disabled />
              </el-form-item>
              <el-form-item label="手机号" prop="phone">
                <el-input v-model="ruleForm2.phone" placeholder="验证码登录使用"/>
              </el-form-item>
              <el-form-item label="头像">
                <el-upload
                  :headers="headers"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  class="avatar-uploader"
                  action="/admin/sys-file/upload">
                  <img v-if="ruleForm2.avatar" id="avatar" :src="avatarUrl" class="avatar">
                                <el-upload :headers="headers" :show-file-list="false" :on-success="handleAvatarSuccess" class="avatar-uploader" action="/admin/sys-file/upload">
                                    <img v-if="ruleForm2.avatar" id="avatar" :src="avatarUrl" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"/>
                </el-upload>
              </el-form-item>
              <!-- <el-form-item
                label="社交登录"
                prop="social">
                <a
                  href="#"
                  style="color: blue"
                  @click="handleClick('wechat')">绑定微信</a>｜
                <a
                  href="#"
                  style="color: blue"
                  @click="handleClick('gitee')">绑定码云</a> |
                <a
                  href="#"
                  style="color: blue"
                  @click="handleClick('osc')">开源中国</a>
              </el-form-item> -->
                            <el-form-item label="社交登录" prop="social">
                                <a href="#" style="color: blue" @click="handleClick('wechat')">绑定微信</a>｜ <a href="#" style="color: blue" @click="handleClick('gitee')">绑定码云</a> |
                                <a href="#" style="color: blue" @click="handleClick('osc')">开源中国</a>
                            </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  @click="submitForm('ruleForm2')">提交
                </el-button>
                                <el-button type="primary" @click="submitForm('ruleForm2')">提交 </el-button>
                <el-button @click="resetForm('ruleForm2')">重置</el-button>
              </el-form-item>
            </el-form>
            <el-form
              v-if="switchStatus==='passwordManager'"
              ref="ruleForm2"
              :model="ruleForm2"
              :rules="rules2"
              label-width="100px"
              class="demo-ruleForm">
              <el-form-item
                label="原密码"
                prop="password">
                <el-input
                  v-model="ruleForm2.password"
                  type="password"
                  auto-complete="off"/>
                        <el-form v-if="switchStatus === 'passwordManager'" ref="ruleForm2" :model="ruleForm2" :rules="rules2" label-width="100px" class="demo-ruleForm">
                            <el-form-item label="原密码" prop="password">
                                <el-input v-model="ruleForm2.password" type="password" auto-complete="off" />
              </el-form-item>
              <el-form-item
                label="密码"
                prop="newpassword1">
                <el-input
                  v-model="ruleForm2.newpassword1"
                  type="password"
                  auto-complete="off"/>
                            <el-form-item label="密码" prop="newpassword1">
                                <div class="password-input-container">
                                    <el-input v-model="ruleForm2.newpassword1" type="password" @input="checkPasswordStrength" show-password auto-complete="off" />
                                    <div v-if="ruleForm2.newpassword1" class="password-strength-indicator">
                                        密码强度: <span :class="passwordLevelClass">{{ passwordLevel }}</span>
                                    </div>
                                </div>
              </el-form-item>
              <el-form-item
                label="确认密码"
                prop="newpassword2">
                <el-input
                  v-model="ruleForm2.newpassword2"
                  type="password"
                  auto-complete="off"/>
                            <el-form-item label="确认密码" prop="newpassword2">
                                <el-input v-model="ruleForm2.newpassword2" type="password" auto-complete="off" />
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  @click="submitForm('ruleForm2')">提交
                </el-button>
                                <el-button type="primary" @click="submitForm('ruleForm2')">提交 </el-button>
                <el-button @click="resetForm('ruleForm2')">重置</el-button>
              </el-form-item>
            </el-form>
@@ -133,9 +83,26 @@
  import {getStore, setStore} from '@/util/store'
  import {editInfo} from '@/api/admin/user'


  export default {
    data() {
        // 密码强度校验
        const validatePasswordStrength = (rule, value, callback) => {
            let strength = 0

            if (value.length >= 8) strength++
            if (/\d/.test(value)) strength++
            if (/[a-z]/.test(value)) strength++
            if (/[A-Z]/.test(value)) strength++
            if (/[!@#$%^&*]/.test(value)) strength++

            if (strength < 4) {
                callback(new Error('密码强度不够，请确保密码包含：大小写字母、数字和特殊字符，且长度不少于8位'))
            } else {
                callback()
            }
        }

        // 确认密码校验
      var validatePass = (rule, value, callback) => {
        if (this.ruleForm2.password !== '') {
          if (value !== this.ruleForm2.newpassword1) {
@@ -147,12 +114,13 @@
          callback()
        }
      }

      return {
        switchStatus: 'userManager',
        avatarUrl: '',
        show: false,
        headers: {
          'Authorization': 'Bearer ' + store.getters.access_token,
                Authorization: 'Bearer ' + store.getters.access_token
        },
        ruleForm2: {
          username: '',
@@ -162,10 +130,25 @@
          avatar: '',
          phone: ''
        },
            passwordLevel: '', // 密码强度级别
            passwordLevelClass: '', // 密码强度样式类
        rules2: {
          password: [{required: true, min: 6, message: '原密码不能为空且不少于6位', trigger: 'change'}],
          newpassword1: [{required: false, min: 6, message: '不少于6位', trigger: 'change'}],
          newpassword2: [{required: false, validator: validatePass, trigger: 'blur'}]
                password: [
                    {
                        required: true,
                        min: 8,
                        message: '原密码不能为空且不少于8位',
                        trigger: 'change'
                    }
                ],
                newpassword1: [{ required: true, message: '请输入新密码', trigger: 'blur' }, { validator: validatePasswordStrength, trigger: 'blur' }],
                newpassword2: [
                    {
                        required: true,
                        validator: validatePass,
                        trigger: 'blur'
                    }
                ]
        }
      }
    },
@@ -174,7 +157,7 @@
    },
    computed: {
      ...mapState({
        userInfo: state => state.user.userInfo
            userInfo: (state) => state.user.userInfo
      })
    },
    methods: {
@@ -185,11 +168,11 @@
        this.switchStatus = tab.name
      },
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
            this.$refs[formName].validate((valid) => {
          if (!valid) {
            return false
          }
          editInfo(this.ruleForm2).then(response => {
                editInfo(this.ruleForm2).then((response) => {
            this.handleLocalData(this.ruleForm2)
            this.$notify.success('修改成功')
            // 修改密码之后强制重新登录
@@ -250,6 +233,43 @@
            type: 'session'
          })
        }
        },
        // 检查密码强度
        checkPasswordStrength(password) {
            let strength = 0

            // 检查长度
            if (password.length >= 8) strength++

            // 检查是否包含数字
            if (/\d/.test(password)) strength++

            // 检查是否包含小写字母
            if (/[a-z]/.test(password)) strength++

            // 检查是否包含大写字母
            if (/[A-Z]/.test(password)) strength++

            // 检查是否包含特殊字符
            if (/[!@#$%^&*]/.test(password)) strength++

            switch (strength) {
                case 0:
                case 1:
                    this.passwordLevel = '弱'
                    this.passwordLevelClass = 'password-weak'
                    break
                case 2:
                case 3:
                    this.passwordLevel = '中'
                    this.passwordLevelClass = 'password-medium'
                    break
                case 4:
                case 5:
                    this.passwordLevel = '强'
                    this.passwordLevelClass = 'password-strong'
                    break
            }
      }
    }
  }
@@ -264,7 +284,7 @@
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
    border-color: #409eff;
  }

  .avatar-uploader-icon {
@@ -281,4 +301,29 @@
    height: 178px;
    display: block;
  }

.password-input-container {
    width: 100%;
    .el-input {
        width: 100%;
    }
}

.password-strength-indicator {
    margin-top: 5px;
    font-size: 12px;
    color: #606266;
}

.password-weak {
    color: #f56c6c;
}

.password-medium {
    color: #e6a23c;
}

.password-strong {
    color: #67c23a;
}
</style>