前言

        一个完整的系统中用户登录功能是不可或缺的，因此用户密码的修改对于前端开发者而言也是工作的重要一环，密码修改分为两种情况：一是用户自身想更换密码；另一种是忘记密码只能选择更换密码。本文自定义了一个通用且常见的组件--密码修改对话框，读者可直接拿去复用，效果如下图所示：

 完整的代码实现：

<template>
    <el-dialog
        :visible.sync="openPassWord"
        title="密码修改"
        center
        :lock-scroll="true"
        :show-close="true"
        :modal-append-to-body="true"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="48%"
        @closed="closeForm"
    >
        <el-form
            ref="passwordFormRef"
            :model="passwordForm"
            :rules="passwordRules"
            label-width="8em"
            label-position="left"
        >
            <el-form-item label="原密码：" prop="originalPass">
                <el-input
                    type="password"
                    autocomplete="off"
                    v-model="passwordForm.originalPass"
                    show-password
                    clearable
                    @input="replaceChinese($event, 'originalPass')"
                    maxlength="20"
                ></el-input>
            </el-form-item>
            <el-form-item label="新密码：" prop="newPass">
                <el-input
                    type="password"
                    autocomplete="off"
                    v-model="passwordForm.newPass"
                    show-password
                    clearable
                    @input="replaceChinese($event, 'newPass')"
                    maxlength="20"
                ></el-input>
            </el-form-item>
            <el-form-item label="新密码确认：" prop="confirmPass">
                <el-input
                    type="password"
                    autocomplete="off"
                    v-model="passwordForm.confirmPass"
                    show-password
                    clearable
                    @input="replaceChinese($event, 'confirmPass')"
                    maxlength="20"
                ></el-input>
            </el-form-item>
        </el-form>
        <br />
        <span>
            <p>
                <b><font color="#rrggbb">合法密码定义：</font></b>
            </p>
            <p>(1) 长度不低于8</p>
            <p>(2) 至少包含一位数字</p>
            <p>(3) 至少包含一个英文字母</p>
            <p>(4) 至少包含一个特殊字符</p>
        </span>
        <span slot="footer">
            <el-button type="primary" @click="submit">保存</el-button>
            <el-button @click="closeForm">关闭</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: 'PasswordModifyDialog',
    props: {
        userId: String,
    },
    data() {
        return {
            openPassWord: true,
            passwordForm: {
                originalPass: '',
                newPass: '',
                confirmPass: '',
            },
            passwordRules: {
                originalPass: [
                    { required: true, message: '请输入原密码', trigger: 'blur' }
                ],
                newPass: [
                    { required: true, validator: this.validateNewPassword, 
                      trigger: 'blur' }
                ],
                confirmPass: [
                    { required: true, validator: this.validateConfirmPassword,
                      trigger: 'blur'}
                ]
            },
        }
    },
    methods: {
        // 限制中文输入类型
        replaceChinese(value, item) {
            this.passwordForm[item] = String(value).replace(/[^\x00-\xff]/g, '')
        },
        validateNewPassword(rule, value, callback) {
            if (String(value).trim() == '') {
                callback(new Error('请输入新密码'))
            } else if (String(value).length < 8) {
                callback(new Error('密码长度须不少于8位'))
            } else if (value == this.passwordForm.originalPass) {
                callback(new Error('新密码不能和原密码相同'))
            } else if (!value.match('(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])')) {
                callback(new Error('密码必须包含数字、英文字母和特殊字符'))
            } else {
                callback()
            }
        },
        validateConfirmPassword(rule, value, callback) {
            if (String(value).trim() == '') {
                callback(new Error('请重新输入新密码'))
            } else if (value !== this.passwordForm.newPass) {
                callback(new Error('两次密码输入不一致'))
            } else {
                callback()
            }
        },
        submit() {
            this.$refs.passwordFormRef.validate((valid) => {
                if (valid) {
                    axios({
                        method: 'post',
                        url: '/user/updatePassword',
                        params: {
                            userId: this.userId,
                            originalPass: this.passwordForm.originalPass,
                            newPass: this.passwordForm.newPass,
                            confirmPass: this.passwordForm.confirmPass,
                        }
                    }).then(function (response) {
                        this.$message({
                            message: response.data.message,
                            type: 'success'
                        })
                    }).catch(function (error) {
                        console.log(error)
                    })
                }
            })
        },
        closeForm() {
            this.openPassWord = false
            this.$emit('close')
        }
    }
}
</script>

<style scoped>
/deep/ .el-dialog__header {
    background-color: #bb7feb;
}
/deep/ .el-dialog__title {
    font-weight: bold;
    color: #fff;
    font-size: 22px;
}
/deep/ .el-dialog__body {
    background-color: #fffaf0;
    font-size: 13px;
}
/deep/ .el-dialog__footer {
    background-color: #fffaf0;
}
/deep/ .el-form-item__label {
    font-weight: bold;
}
</style>

备注

1、上述密码修改对话框是做成了一个自定义组件，属性只定义了一个 userId，使用时需在父组件中添加上该属性值，父组件通过该属性将用户名传递给子组件，从而完成密码的修改功能；

2、该对话框有个关闭按钮触发的方法 closeForm() ，在父组件中可以添加一个 @close 的事件方法去处理关闭对话框后的业务逻辑；

3、在通讯方法 axios() 中传递了一个 params 对象给后台，这个 params 对象中涉及到密码字段的在本文未加密，但在实际的工程项目中是必须要加密后传输到后台的，以防黑客抓包获取到用户密码等内部信息造成信息泄露风险，然后后台拿到密文再解密，具体的加解密方法需要读者自行书写添加进去，本文略。