<!--
|
* @Description:
|
* @Version: 2.0
|
* @Autor: yuxinqiang
|
* @Date: 2022-08-03 09:29:22
|
* @LastEditors: yuxinqiang
|
* @LastEditTime: 2022-08-03 15:00:23
|
-->
|
<template>
|
<div>
|
<el-form ref="passwordForm" class="password-form" :model="userPasswordForm" :rules="rules" :labelWidth="labelWidth">
|
<el-form-item label="旧密码" prop="oldPassword">
|
<el-input type="password" v-model="userPasswordForm.oldPassword" autocomplete="off" clearable
|
placeholder="请输入旧密码" />
|
</el-form-item>
|
<el-form-item label="新密码" prop="newPassword">
|
<el-input type="password" v-model="userPasswordForm.newPassword" autocomplete="off" clearable
|
placeholder="请输入新密码（至少8位字母数字的组合）" />
|
</el-form-item>
|
<el-form-item label="确认密码" prop="confirmPassword">
|
<el-input type="password" v-model="userPasswordForm.confirmPassword" autocomplete="off" clearable
|
placeholder="请再次输入新密码（至少8位字母数字的组合）" />
|
</el-form-item>
|
</el-form>
|
<div class="form-footer">
|
<el-button @click="reset(passwordForm)">重置</el-button>
|
<el-button type="primary" @click="savePassword(passwordForm)">确认</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { FormInstance, FormRules } from 'element-plus'
|
import { validatorPassword, regularPassword } from '@/utils/validate'
|
|
const labelWidth = ref<string | number>('100px')
|
|
const passwordForm = ref<FormInstance>()
|
|
interface passwordType {
|
oldPassword: string
|
newPassword: string
|
confirmPassword: string
|
}
|
const userPasswordForm = reactive<passwordType>({
|
oldPassword: '',
|
newPassword: '',
|
confirmPassword: ''
|
})
|
|
// 验证确认密码与新密码是否一致
|
const validatorConfirmPassword = (rule: any, val: string, callback: Function) => {
|
if (!val) {
|
return callback(new Error('确认密码不能为空'))
|
}
|
|
if (!regularPassword(val)) {
|
return callback(new Error('密码格式不正确'))
|
}
|
|
if (val != userPasswordForm.newPassword) {
|
return callback(new Error('两次输入的密码不一致'))
|
}
|
return callback()
|
}
|
|
const rules = reactive<FormRules>({
|
oldPassword: [{ required: true, message: '旧密码不能为空', trigger: 'blur' }],
|
newPassword: [
|
{ required: true, validator: validatorPassword, trigger: 'blur' }
|
],
|
confirmPassword: [
|
{ required: true, validator: validatorConfirmPassword, trigger: 'blur' },
|
],
|
})
|
|
// 重置表单信息
|
const reset = (formEl: FormInstance | undefined) => {
|
if (!formEl) return
|
formEl.resetFields()
|
}
|
|
// 子组件与父组件的通信方法
|
const emits = defineEmits(['savePassword'])
|
|
// 保存密码修改
|
const savePassword = (formEl: FormInstance | undefined) => {
|
if (!formEl) return
|
formEl.validate((valid) => {
|
if (valid) {
|
emits('savePassword', userPasswordForm)
|
}
|
})
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
.password-form {
|
width: 80%;
|
margin: auto;
|
}
|
|
.form-footer {
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
}
|
</style>
|
