vue登录密码强度校验

<template>
    <div>
        <el-form ref="psdform" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="新密码:" prop="newPassword">
                <el-input
                :type="newPsdtype"
                v-model="form.newPassword"
                placeholder="8-16位密码，区分大小写"
                >
                    <span slot="suffix" class="show_pwd" @click="showPwd">
                        <svg-icon
                        :icon-class="newPsdtype == 'password' ? 'eye' : 'eye-open'"
                        />
                    </span>
                </el-input>

                <div class="intensity">
                    <span class="psdText">密码强度</span>
                    <span
                        class="line"
                        :class="[level.includes('low') ? 'low' : '']"
                    ></span>
                    <span
                        class="line"
                        :class="[level.includes('middle') ? 'middle' : '']"
                    ></span>
                    <span
                        class="line"
                        :class="[level.includes('high') ? 'high' : '']"
                    ></span>
                    <div class="warningtext">
                        密码应由8-16位数字、字母、符号组成。请不要使用容易被猜到的密码
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="确认密码:" prop="confirmPassword">
                <el-input
                :type="confirmPsdtype"
                v-model="form.confirmPassword"
                placeholder="确认密码"
                >
                <span slot="suffix" class="show_pwd" @click="showconfirmPwd">
                    <svg-icon
                    :icon-class="confirmPsdtype == 'password' ? 'eye' : 'eye-open'"
                    /> </span
                 ></el-input>
            </el-form-item>
        </el-form>
    </div>

</template>
<script>
export default {
    data() {
        return {
        form: {
            newPassword: '',
            confirmPassword: ''
        },
        rules: {
            newPassword: [
            { required: true, validator: this.checkPassword, trigger: 'change' }
            ],
            confirmPassword: [
            {
                required: true,
                validator: this.checkConfirmPassword,
                trigger: 'blur'
            }
            ],
        },
        level: []
        }
  },
  methods: {
        //点击小眼睛
        showPwd() {
            if (this.newPsdtype === 'password') {
                this.newPsdtype = ''
            } else {
                this.newPsdtype = 'password'
            }
        },
        //点击小眼睛
        showconfirmPwd() {
            if (this.confirmPsdtype === 'password') {
                this.confirmPsdtype = ''
            } else {
                this.confirmPsdtype = 'password'
            }
        },
        // 校验密码
        checkPassword(rule, value, callback) {
            this.level = []
            if (!value) {
                return callback('密码不能为空')
            }
            if (value.length < 8) {
                return callback('密码不少于8位')
            }
            if (value.length > 16) {
                return callback('密码不大于16位')
            }
            // 校验是数字
            const regex1 = /^\d+$/
            // 校验字母
            const regex2 = /^[A-Za-z]+$/
            // 校验符号
            const regex3 =
            /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+$/
            if (regex1.test(value)) {
                this.level.push('low')
            } else if (regex2.test(value)) {
                this.level.push('low')
            } else if (regex3.test(value)) {
                this.level.push('low')
            } else if (/^[A-Za-z\d]+$/.test(value)) {
                this.level.push('low')
                this.level.push('middle')
            } else if (
                /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、\d]+$/.test(
                    value
                )
            ) {
                this.level.push('low')
                this.level.push('middle')
            } else if (
                /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、A-Za-z]+$/.test(
                    value
                )
            ) {
                this.level.push('low')
                this.level.push('middle')
            } else if (
                /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、A-Za-z\d]+$/.test(
                    value
                )
            ) {
            this.level.push('low')
            this.level.push('middle')
            this.level.push('high')
            }
            return callback()
        },
        // 确认密码
        checkConfirmPassword(rule, value, callback) {
            if (!value) {
                return callback('请输入确认密码')
            }
            if (value != this.form.newPassword) {
                return callback('两次密码输入不一致，请重新输入')
            }
        },
  }
}
</script>
<style>
.show_pwd {
  cursor: pointer;
  user-select: none;
  padding-right: 5px;
}
.intensity {
  
}
.psdText {
font-size: 14px;
margin-right: 10px;
}
.line {
display: inline-block;
width: 48px;
height: 4px;
background: #d8d8d8;
border-radius: 3px;
margin-right: 8px;
}
.low {
    background: #f4664a;
}
.middle {
    background: #ffb700;
}
.high {
    background: #2cbb79;
}
.level {
margin: 0 16px 0 8px;
}
.warningtext {
color: #5a5a5a;
font-size: 12px;
margin-top: 5px;
}


</style>

转自：https://blog.youkuaiyun.com/qq_45093219/article/details/125207932