拿来即用修改密码功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了拿来即用修改密码功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

拿来即用修改密码功能,element-ui,vue3,vue.js,elementui 文章来源地址https://www.toymoban.com/news/detail-685328.html

<template>
	<div>
		<!-- 重置密码 -->
		<el-dialog
			title="修改密码"
			v-model="state.resetPwdDialogVisible"
			:showClose="state.firstLogin !== 1"
			width="550px"
			@close="onCancel"
			:close-on-click-modal="false"
		>
			<el-form :model="state.resetPwdForm" status-icon :rules="state.resetPwdRules" ref="pwdForm" label-width="100px">
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
					<el-form-item label="新密码" prop="pwd_new1">
						<el-input
							placeholder="请输入新密码"
							type="password"
							v-model="state.resetPwdForm.pwd_new1"
							autocomplete="new-password"
							show-password
							clearable
						>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
					<el-form-item label="确认新密码" prop="pwd_new2">
						<el-input
							placeholder="请再次输入新密码"
							type="password"
							v-model="state.resetPwdForm.pwd_new2"
							autocomplete="new-password"
							show-password
							clearable
						>
						</el-input>
					</el-form-item>
				</el-col>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取消</el-button>
					<el-button v-throttle type="primary" @click="onSubmit" size="default">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="layoutBreadcrumbUser">
import { updatePwd } from '/@/api/login.js';

const pwdForm = ref(null);

const validatePass = (rule, value, callback) => {
	if (value === '') {
		callback(new Error('请输入密码'));
	} else {
		if (state.resetPwdForm.pwd_new2 !== '') {
			pwdForm.value.validateField('pwd_new2');
		}
		callback();
	}
};
const validatePass2 = (rule, value, callback) => {
	if (value === '') {
		callback(new Error('请再次输入密码'));
	} else if (value !== state.resetPwdForm.pwd_new1) {
		callback(new Error('两次输入密码不一致!'));
	} else {
		callback();
	}
};
const state = reactive({
	resetPwdDialogVisible: false, // 修改密码
	resetPwdForm: {
		pwd_new1: '',
		pwd_new2: '',
	},
	resetPwdRules: {
		pwd_new1: [
			{
				required: true,
				trigger: 'blur',
				message: '请输入6~20位不含有中文的密码',
				pattern: /^[^\u4e00-\u9fa5 ]{6,20}$/,
			},
			{ validator: validatePass, trigger: 'blur' },
		],
		pwd_new2: [
			{
				required: true,
				trigger: 'blur',
				message: '请输入6~20位不含有中文的密码',
				pattern: /^[^\u4e00-\u9fa5 ]{6,20}$/,
			},
			{ validator: validatePass2, trigger: 'blur' },
		],
	}
});

// 取消
const onCancel = () => {
	state.resetPwdDialogVisible = false;
	// 清除验证
	pwdForm.value.resetFields();
};

// 修改密码保存
const onSubmit = () => {
	if (!pwdForm) return;
	pwdForm.value.validate((valid) => {
		if (valid) {
			toSavePwd();
		} else {
			return false;
		}
	});
};

const toSavePwd = () => {
	updatePwd(state.resetPwdForm)
		.then((res) => {
			if (res.data.code === 1) {
				ElMessage.success('密码修改成功');
				state.resetPwdDialogVisible = false;
			}
		})
		.catch((error) => {
			return;
		});
};

// 页面加载时
onMounted(() => {});
</script>

到了这里，关于拿来即用修改密码功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！