vue实现修改密码

1.定义一个对话框并绑定数据

<el-dialog title="重置密码" :visible.sync="ResetPwdDialogVisible" width="40%" @close="resetForm('pwdForm')"><el-form :model="resetPwdForm" status-icon :rules="resetPwdRules" ref="pwdForm" label-width="100px"><el-form-item label="密码" prop="password"><el-input prefix-icon="iconfont icon-showpassword" placeholder="请输入 密码" type="password" v-model="resetPwdForm.password" autocomplete="off"></el-input></el-form-item><el-form-item label="新密码" prop="new_password"><el-input prefix-icon="iconfont icon-showpassword" placeholder="请输入新密码" type="password" v-model="resetPwdForm.new_password" autocomplete="off"></el-input></el-form-item><el-form-item label="确认密码" prop="password_again"><el-input prefix-icon="iconfont icon-showpassword" placeholder="请再次输入新密码" type="password" v-model="resetPwdForm.password_again" autocomplete="off"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('pwdForm')">确认修改</el-button><el-button @click="resetForm('pwdForm')">重置</el-button></el-form-item></el-form></el-dialog>

2.在data中定义数据

data(){var validatePass = (rule, value, callback) => {if (value === '') {callback(new Error('请输入密码'));} else {if (this.resetPwdForm.password_again !== '') {this.$refs.pwdForm.validateField('password_again');}callback();}};var validatePass2 = (rule, value, callback) => {if (value === '') {callback(new Error('请再次输入密码'));} else if (value !== this.resetPwdForm.new_password) {callback(new Error('两次输入密码不一致!'));} else {callback();}};return{ResetPwdDialogVisible: false,resetPwdForm: {username: '',password: '',new_password: '',password_again: '',},resetPwdRules: {password: [{ required: true, message: '请输入密码', trigger: 'blur' },{min: 6,max: 18,message: '用户密码的长度在6～18个字符',trigger: 'blur'},{ validator: validatePass, trigger: 'blur' }],new_password: [{ required: true, message: '请输入新密码', trigger: 'blur' },{min: 6,max: 18,message: '用户密码的长度在6～18个字符',trigger: 'blur'},{ validator: validatePass, trigger: 'blur' }],password_again: [{ required: true, message: '请确认新密码', trigger: 'blur' },{min: 6,max: 18,message: '用户密码的长度在6～18个字符',trigger: 'blur'},{ validator: validatePass2, trigger: 'blur' }],}
}

3.在methods中操作数据

submitForm(formName) {this.resetPwdForm.username =  this.$store.getters.username;console.log(this.resetPwdForm);this.$refs[formName].validate(async valid => {if (!valid) return;const {status: status} = await this.axios.put("users/resetPassword", this.resetPwdForm);if (status !== 200) return this.$message.error('重置密码失败！');this.$message.success("重置密码成功，正在跳转登录页面");this.$router.push("/Login").catch(err => {err})});},resetForm(formName) { //重置this.$refs[formName].resetFields();
}

4.vuex中

//登录页面中 派发handleUserName事件login(){v1.$store.commit('handleUserName', res.data.username);
}//vuex中
const state = {username: '' || localStorage.getItem('username'),
},
const mutations = {handleUserName: (state, user_name) => {state.username = user_name// 把登录的用户的名保存到localStorage中，防止页面刷新，导致vuex重新启动，用户名就成为初 始值（初始值为空）的情况localStorage.setItem('username', user_name)},
},
const getters = {username: (state) => state.username,
},
const store = new Vuex.Store({actions,mutations,state,getters
})
export default store

vue实现修改密码相关推荐

实现修改密码的功能（Vue+elementUI）
<el-dialog title="重置密码" width="30%" :visible.sync=" ...
修改密码逻辑修复建议_一项更改以修复技术
修改密码逻辑修复建议 Put a Friendly Bot Between You and the Evil Bots 在您和邪恶的机器人之间放一个友好的机器人 Movies like The Soc ...
为svn服务增加自助修改密码功能
为svn服务增加自助修改密码功能在维护svn服务的过程中,为用户创建了帐号密码,因svn服务原本没有提供修改密码的功能,所以用户如果觉得自己的密码不合适,要修改,则必须通过svn管理员进行修改. ...
个人信息界面+修改密码界面
下班没啥事,花费三个小时做了一个"个人设置"界面,所使用的框架是vue,技术是element UI组件. 拿去不谢!!!有帮助的话,点个赞再走 <template>&l ...
使用QQ邮箱修改密码
后端 from rest_framework.response import Response from rest_framework.views import APIView from rest_f ...
前端Vue自定义支付密码输入键盘Keyboard和支付设置输入框Input
前端Vue自定义支付密码输入键盘Keyboard和支付设置输入框Input, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13 ...
springBoot加layui和mybatis后台管理系统增删改查分页登录注销修改密码功能
超市订单管理系统 1 登录页面 1.1 登录点击提交按钮提交form表单使用post请求把(String name, String password)数据传到后台loginController 路径 ...
若依-用户长时间未修改密码强制修改
需求原因用户长期未修改密码可能存在密码安全问题,项目要求提供一个配置使用户一定时间间隔就修改密码要求后端登录时判断是否达到最大间隔时间,达到则修改用户的constraint字段(方便前端判断): ...
linux 正则设置密码复杂度,Ubuntu修改密码及密码复杂度策略设置方法
一.修改密码 1.修改普通用户密码 passwd 先输入当前密码确认,然后输入新的密码修改 2.修改root用户密码 sudo passwd root 默认root用户被禁止登录,如果需要解除限制,修 ...

vue实现修改密码

vue实现修改密码相关推荐

最新文章

热门文章

vue实现 修改密码

vue实现 修改密码相关推荐

最新文章

热门文章

vue实现修改密码

vue实现修改密码相关推荐