100 lines
3.5 KiB
Vue
100 lines
3.5 KiB
Vue
<template>
|
||
<el-form ref="form" :model="user" :rules="rules" label-width="80px">
|
||
<div>
|
||
<h3>密码组成要求：</h3>
|
||
<ul style="color: green">
|
||
<li>最小长度：不少于 8 个字符。</li>
|
||
<li>字符种类：（密码必须包含以下至少三种不同类型字符）
|
||
<ul>
|
||
<li>大写英文字母（A-Z）</li>
|
||
<li>小写英文字母（a-z）</li>
|
||
<li>数字（0-9）</li>
|
||
<li>特殊符号（如：!@#$%^&*()-_=+[]{}|;:,.<>/?）</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<h3>禁止使用的内容：</h3>
|
||
<ul style="color: red">
|
||
<li>禁止使用与用户账号、姓名、工号、手机号、邮箱等明显相关的信息作为密码。</li>
|
||
<li>禁止使用常见弱口令，如：“123456”、“password”、“admin”、“abc123”、“qwerty” 等。</li>
|
||
<li>不允许使用重复字符或简单模式（如：“aaaaaa”、“111111”、“abcabc” 等）。</li>
|
||
</ul>
|
||
</div>
|
||
<el-form-item label="旧密码" prop="oldPassword">
|
||
<el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password/>
|
||
</el-form-item>
|
||
<el-form-item label="新密码" prop="newPassword">
|
||
<el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password/>
|
||
</el-form-item>
|
||
<el-form-item label="确认密码" prop="confirmPassword">
|
||
<el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password/>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" size="mini" @click="submit">保存</el-button>
|
||
<el-button type="danger" size="mini" @click="close">关闭</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</template>
|
||
|
||
<script>
|
||
import {updateUserPwd, checkWeakPwd} from "@/api/system/user";
|
||
|
||
export default {
|
||
data() {
|
||
const equalToPassword = (rule, value, callback) => {
|
||
if (this.user.newPassword !== value) {
|
||
callback(new Error("两次输入的密码不一致"));
|
||
} else {
|
||
callback();
|
||
}
|
||
};
|
||
const validatePassword = (rule, value, callback) => {
|
||
checkWeakPwd(value).then(response => {
|
||
if (response.code === 200) {
|
||
callback();
|
||
} else {
|
||
callback(new Error(response.message));
|
||
}
|
||
})
|
||
};
|
||
return {
|
||
user: {
|
||
oldPassword: undefined,
|
||
newPassword: undefined,
|
||
confirmPassword: undefined
|
||
},
|
||
// 表单校验
|
||
rules: {
|
||
oldPassword: [
|
||
{required: true, message: "旧密码不能为空", trigger: "blur"}
|
||
],
|
||
newPassword: [
|
||
{required: true, message: "新密码不能为空", trigger: "blur"},
|
||
{min: 8, max: 20, message: "长度在 8 到 20 个字符", trigger: "blur"},
|
||
{validator: validatePassword, trigger: "blur"},
|
||
],
|
||
confirmPassword: [
|
||
{required: true, message: "确认密码不能为空", trigger: "blur"},
|
||
{required: true, validator: equalToPassword, trigger: "blur"},
|
||
]
|
||
}
|
||
};
|
||
},
|
||
methods: {
|
||
submit() {
|
||
this.$refs["form"].validate(valid => {
|
||
if (valid) {
|
||
updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
|
||
this.$modal.msgSuccess("修改成功");
|
||
this.$tab.closePage();
|
||
});
|
||
}
|
||
});
|
||
},
|
||
close() {
|
||
this.$tab.closePage();
|
||
}
|
||
}
|
||
};
|
||
</script>
|